基于vue脚手架的token验证结合VUEX解决登陆回退

1. 在src下的utils文件夹新建一个js文件（没有就新建）封装三个函数，为删除获取和设置token使用

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

// 储存数据
export const setItem = (key, value) => {
     
  if (typeof value === 'object') {
     
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}

// 获取数据
export const getItem = key => {
     
  const data = window.localStorage.getItem(key)
  try {
     
    return JSON.parse(data)
  } catch (err) {
     
    return data
  }
}
// 删除数据
export const removeItem = key => {
     
  window.localStorage.removeItem(key)
}

2.登陆成功 调用 this.$store.commit(‘setUser’, data.data)去储存数据token.
data.data储存着token和refresh_token

  const {
      data } = await login(user)
        this.$toast.success('登陆成功')
        // 处理token
        this.$store.commit('setUser', data.data)
        this.$router.push('/layout')

3.在store仓库将上述三个方法导入。并在 mutations定义setUser去通过state去存储token和refresh_token

import {
      setItem, getItem } from '@/utils/storage'
export default new Vuex.Store({
     
  state: {
      user: getItem('token') },
  mutations: {
     
    setUser(state, data) {
     
      state.user = data

      setItem('token', JSON.stringify(state.user))
    }
  }
})
4.点击退出登录，通过setUser,把token和refresh_token设置为null
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200701095200505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzkyMzc0,size_16,color_FFFFFF,t_70)
5.设置请求拦截器，验证Authorization 字段。

```javascript
// 请求拦截器
request.interceptors.request.use(
  function(config) {
    const { user } = store.state
    if (user && user.token) {
      config.headers.Authorization = `Bearer ${
     user.token}`
    }
    return config
  },
  function(error) {
     
    return Promise.reject(error)
  }
)