Vuex处理用户Token过期及优化设置封装本地存储操作模块

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  // 1. 存储数据的地方 - 类比于vue文件的data()
  state: {
    // 一个对象，储存当前登录用户的token数据
    user: {}
  },
  // 2. 外界修改store中state的属性值，必须通过mutations中设置的修改方法 - 类比methods
  // 注意：这里方法里面的代码和.vue文件中的书写方式有差异，注意区分
  mutations: {
    setUser (state, data) {
      state.user = data
    }
  },
  // 3. 涉及到异步操作后修改state数据时，必须先过actions中的自定义方法，通过actions去调用mutations中的方法
  actions: {
  },
  // 4. 是state中数据的计算属性 - 类比computed
  getters: {
  },
  // 5. 模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、 getters，使得结构非常清晰，方便管理。
  modules: {
  }
})

async onSubmit () {
	...
  try {
    const res = await loginAPI(user)
    console.log('登录成功', res)
    // 调用store中的方法，将接口返回的token存到状态管理器中
    this.$store.commit('setUser', res.data.data)
    // 提示 success 或者 fail 的时候，会先把其它的 toast 先清除
    this.$toast.success('登录成功')
  } catch (err) {
    ...
},

const TOKEN_KEY = 'TOUTIAO_USER'
export default new Vuex.Store({
  state: {
    user: JSON.parse(window.localStorage.getItem(TOKEN_KEY))
  },
  mutations: {
    setUser (state, data) {
      state.user = data
      // 为了防止刷新丢失，需要把数据备份到本地存储
      window.localStorage.setItem(TOKEN_KEY, JSON.stringify(state.user))
    }
  },
	...
})

// 封装本地存储操作模块


export const setItem = (key, value) => {
  // 将数组，对象等引用数据类型转化为JSON字符串进行存储
  // 将简单数据类型直接存储
  // 需要外界使用该方法时传入对一个的 键名
  if (typeof value === 'object') {
    // 将数组，对象等引用数据类型转化为JSON字符串进行存储
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}

export const getItem = key => {
  // 如果该键存储的是引用数据类型的JSON字符串，那么需要进行JSON.parse的转化
  const data = window.localStorage.getItem(key)
  // 使用JSON.parse()做JSON数据转化时可能会出现报错
  // 1. 做条件判断(要去找到所有满足、不满足的条件) 2. 做错误判断
  try {
    // 先尝试做JSON.parse()的转化，如果报错了，在把他当成原始数据进行返回
    return JSON.parse(data)
  } catch (error) {
    return data
  }
}

export const removeItem = key => {
  window.localStorage.removeItem(key)
}

import { getItem, setItem } from '../utils/storage.js'

import { getItem, setItem } from '../utils/storage.js'
const TOKEN_KEY = 'TOUTIAO_USER'
export default new Vuex.Store({
  state: {
    user:getItem(TOKEN_KEY)
  },
  mutations: {
    setUser (state, data) {
      state.user = data
      // 为了防止刷新丢失，需要把数据备份到本地存储
      setItem(TOKEN_KEY, state.user)
    }
  },
	...
})

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  // state存放状态,
  state: {
    name: 'tom', // 需要共用的数据
    age: '22'
  },
  // getter为state的计算属性
  getters: {
    getName: (state) => state.name, // 获取name
    getAge: (state) => state.age
  },
  // mutations可更改状态的逻辑，同步操作
  mutations: {
    setName: (state, data) => { state.name = data },
    setAge: (state, data) => { state.age = data }
  },
  // 提交mutation，异步操作
  actions: {
    acSetName (context, name) {
      setTimeout(() => {
        // 延时1秒提交至mutations中的方法
        context.commit('setName', name)
      }, 1000)
    },
    acSetAge (context, age) {
      setTimeout(() => {
        context.commit('setAge', age)
      }, 1000)
    }
  },
  // 将store模块化
  modules: {
  }
})

<template>
  <div class="wrapper">
    asd
    <!-- 读取mapGetters中的getName与getAge -->
    <div>
      name：<span>{{ getName }}</span>
    </div>
    <div>
      age：<span>{{ getAge }}</span>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex' // 导入vuex的辅助函数
export default {
  components: {},
  // 计算属性computed无法传递参数
  computed: {
    // 映射 state 中的数据为计算属性
    ...mapState(['name', 'age']),
    // 映射 getters 中的数据为计算属性
    ...mapGetters(['getName', 'getAge'])
  }
}
</script>
<style scoped>
</style>

<template>
  <div class="wrapper">
    <div>
      <span>同步修改：</span>
      <!--直接回车调用mapMutations中的setName方法与setAge方法-->
      <input
        v-model="nameInp"
        @keydown.enter="setName(nameInp)"
        placeholder="同步修改name"
      />
      <input
        v-model="ageInp"
        @keydown.enter="setAge(ageInp)"
        placeholder="同步修改age"
      />
    </div>
    <div>
      <span>异步修改：</span>
      <!--直接回车调用mapAtions中的acSetName方法与acSetAge方法-->
      <input
        v-model="acNameInp"
        @keydown.enter="acSetName(acNameInp)"
        placeholder="异步修改name"
      />
      <input
        v-model="AcAgeInp"
        @keydown.enter="acSetAge(AcAgeInp)"
        placeholder="异步修改age"
      />
    </div>
  </div>
</template>
<script>
import { mapMutations, mapActions } from 'vuex' // 导入vuex的辅助函数
export default {
  components: {},
  data () {
    return {
      nameInp: '', // 绑定输入框的值
      ageInp: '',
      acNameInp: '',
      AcAgeInp: ''
    }
  },
  methods: {
    // 用于生成与 mutations 对话的方法，即：包含 $store.commit(xx) 的函数
    ...mapMutations(['setName', 'setAge']),
    // 用于生成与 actions 对话的方法，即：包含 $store.dispatch(xx) 的函数
    ...mapActions(['acSetName', 'acSetAge'])
  }
}
</script>
<style scoped>
</style>

axios({
  method: "",
  url: "",
  headers: {
    Authorization: "Bearer token"
  }
})

import axios from 'axios'
import store from '../store/index.js'

const request = axios.create({
  baseURL: 'http://toutiao.itheima.net/' // 接口的基准路径
})

// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
  // Do something before request is sent
  // config ：本次请求的配置对象
  // config 里面有一个属性：headers
  const { user } = store.state
  if (user && user.token) {
    config.headers.Authorization = `Bearer ${user.token}`
  }
  return config
}, function (error) {
  // 如果请求出错 - 抛出异常
  // Do something with request error
  return Promise.reject(error)
})

import request from '@/utils/request'
// import store from '@/store'


export const getUserInfo = () => {
  return request({
    method: 'GET',
    url: '/v1_0/user'
    // 发送请求头数据
    // headers: {
    //   // 注意：该接口需要授权才能访问
    //   //       token的数据格式：Bearer token数据，注意 Bearer 后面有个空格
    //   Authorization: `Bearer ${store.state.user.token}`
    // }
  })
}