vue项目中,解析token,并且将token存储在vuex中

1,906 阅读1分钟

后端使用的是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…