vuex 需要手动刷新才能获取到token 无法正常登录 变量修改不正常 解决办法

bug状况:每次登录之后,后台都是无token无权限状态的.需要手动刷新重新载入才能有token
出现这种问题先考虑是不是token是空的,多观察读写token的地方可以更快找到bug所在

1.检查store设置

store目录下的js文件,需要有以下几个变量:

export default new Vuex.Store({
state:{token:''},
mutitions:{
updateToken(state,token){
state.token = token
}},
action:{}
)

this.$store.commit('updateToken','后端返回的token');//store已经做全局处理

修改state内数据必须要用通过comit函数提交到mutations内的函数进行修改
其中要注意的是,action是异步的,mutations是同步的

实际可以直接通过this.state.token='后端返回的token’修改,但是严格模式下不允许的,会报错,在debug情况下需要尽量把所有有可能出错的地方改完美.而且用mutations是可以进行回滚之类的操作,但我暂时没用到类似的功能

2.检查token存放的位置

因为我写的是后台管理界面,为了方便直接存在了localStorage里面了,如果是用户使用的前端,建议放在sessionStorage中,有时间限制,关掉浏览器重新开需要重新登录,更加安全
在登录界面的vue中post的api中,成功后需要对返回的用户信息和token进行处理,顺便调试输出一下token是否null

window.localStorage.setItem('token', resp.token);
console.log(resp.token);

3.检查axios的header是否设置了默认的token

如果是通过header存放token的话,在axios文件中寻找 axios.create 字段,看看自己的headers是不是设置了默认的token值,在这里可以把它删掉,然后后面获取到token之后再通过自己写的updateToken函数来添加到header中,logout同理.

export const updateHeader = (key,params) =>{
	http.defaults.headers.common[key] = params;
}
this.updateHeader('Authorization', '后端获取的token');//登录时候
this.updateHeader('Authorization', null);//登出时候

在登录成功的执行语句块中更新token,在登出时候把其设置为null进行删除

4.检查post的格式

如果token是放在cookie或者session或者json的话,可以F12或者fiddler抓包一下看看包中是否有token再针对性进行debug

基本上面四步走完以后,应该可以了,如果还是有毛病可以留言问问呢