后端使用的是nodejs中的 jsonwebtoken 来返回token的,前端要使用对应的jwt-decode来解析返回的token。
在Login.vue中,用户完成了登录后:
(1)将得到的token存储在缓存中,导航守卫的判断中可以使用到
(2)使用 jwt-decode 解析返回的token。
(3)将解析得到的token 存储在vuex中。
(4)登录成功,跳转至首页。
// 登录请求this.$axios.post('/api/users/login',this.user)
.then(res=>{
const {token} = res.data;
// 解析token
const decode = jwtDecode(token);
// 存储到vuex中
this.$store.dispatch('setUser',decode);
// 缓存token
localStorage.setItem('wxToken',token);
this.$router.push('/');
})
store.js文件:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const types = {
SET_USER:'SET_USER' // 用户信息
};
const state = {
user:{}
};
const getters = {
user:state => state.user
};
const mutations = {
[types.SET_USER](state,user){
if(user){
state.user = user;
}else{
state.user = ''
}
}
}
const actions = {
setUser:({commit},user)=>{
commit(types.SET_USER,user);
}
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
});
以上我们的token的状态管理局设置好了,但是在页面刷新的时候,vuex中设置的状态就不存在了,那么,我们需要在App.vue里面进行相关的判断。
app.vue
created(){
if(localStorage.getItem('wxToken')){
const decode = jwtDecode(localStorage.getItem('wxToken'))
this.$store.dispatch('setUser',decode)
}
}
这样,我们在刷新页面的时候,就不会出现上面的问题啦。
更多内容,可以访问博客:blog.csdn.net/Miss_liangr…