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