登录时的代码
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
console.log(response)
const token = response.data
commit('SET_TOKEN', token.token)
setToken(token)
resolve()
}).catch(error => {
reject(error)
})
})
}
登录结束后通过setToken确实吧token写入了state
token的保存格式是一个json,包含token本体和token过期时间
SET_TOKEN: (state, token) => {
state.token = token
}
本次请求结束后,token确实存在并被存储于数据区,并且被存入state;
所以此时发起请求,请求中获取token的方法能获取到正确的token
#从coockie拿取tokensJSON并序列化
export function getToken() {
const token = Cookies.get(TokenKey)
return token ? JSON.parse(token) : null
}
#取出了token和过期时间,没有问题
const { token, expires } = getToken()
而刷新页面时数据被重置,这时并没有获取token的操作,而本身从stata获取token的方法又出现了错误,所以导致了获取token失败。出现了登陆时调用的获取list有效,而登录后刷新又自动退出;
#脚本开始时对state进行了初始化
const state = {
token: getAccessToken(),
name: '',
avatar: '',
introduction: '',
roles: [],
email: '',
user: {}
}
#这是get方法,起初下面的key值是拿不到数据的,所以三元算式得出了null
export function getAccessToken() {
const token = Cookies.get(TokenKey)
return token ? JSON.parse(token).access_token : null
}
#此时如果是登陆后,所有数据都是可查的,【因为之前的登录逻辑中在登录成功后对每一个值都进行了赋值(见第一行)】
#此时由于上面初始化时使用了另一个方法获取token导致获取到了null
#统一请求处理中使用了
if (store.getters.token == null) {
return config
}
#这里的store.getters.token对应getesrs中的token: state => state.user.token,
#上方判断是否有token,如果没有就直接发起请求,就不追走下面拿取token并放入请求的步骤
const { token, expires } = getToken()
if (store.getters.token && expires > new Date()) {
config.headers['Authorization'] = `Bearer ${token}`
return config
}
所以最后就没有token发起请求,而刚登录的时候state是有效值,所以能拿到,刷新以后从新执行初始化拿到了null,一个很简单的错误;关键是借此捋了捋这个模板的执行思路和封装风格
附件:
const mutations = {
SET_TOKEN: (state, token) => {
// 这里的state只是上面声明的变量
state.token = token
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_EMAIL: (state, email) => {
state.email = email
},
SET_USER: (state, user) => {
state.user = user
}