每当我们存了token进localStorage中点击刷新会让token重新获取,这个时候就需要用到cookie让他持久存储到localStorage。
1、首先配置util文件中的auth.js文件(文件名随便起)用cookie来控制token
import Cookies from 'js-cookie'
const TokenKey(变量名) = 'cookiename' //存到cookie的键名称
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
2、配置完auth.js文件后利用vuex来设置token
//login是后端接口,用来拿到token数据
import { login } from '@/api/user'
//引入
import { getToken, setToken } from '@/utils/auth'
const state = {
token: getToken()
}
const mutations = {
setToken(state, data) {
state.token = data
setToken(data)
},
removeToken(state, data) {
state.token = null
}
}
const actions = {
async login(store, data) {
const res = await login(data)
store.commit('setToken', res.data.data)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}