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

在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  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) } )