如何通过vue路由器和服务器提供的JWT令牌来管理用户的身份验证？

问题描述：

我正在构建一个web应用程序，使用前端的vue/webpack和后端的node.js/express。 node.js后端公开了前端用于登录，注销和其他CRUD类操作的REST API。如何通过vue路由器和服务器提供的JWT令牌来管理用户的身份验证？

在服务器端，登录REST API正在设置JWT令牌并重定向到vue应用程序主路径。在前端侧，vue组件的访问（包括home）由vue路由器的beforeEach方法保护（基于here的样本）。

我的问题是，在我的vue应用程序中，如何访问JWT令牌（由响应的HTTP头中的登录REST API设置）并将其存储在我的vuex存储中，以便我的vue组件可以使用它？

感谢您的帮助！ PS：我如何使用Node.js 8.5，Vue的2.4.4，Vue的路由器2.7，Vuex 2.4.1

答

使用Axios Interceptors：

import { defaults, get } from 'lodash' 
import axios from 'axios' 
import store from 'vuex-store' 
import def from './default' 

export const connection = (options = {}) => { 
    def.headers = { Authorization: store.getters.auth.getToken() } 
    const instance = axios.create(defaults(def, options)) 

    instance.interceptors.response.use(function (response) { 
    const newtoken = get(response, 'headers.authorization') 
    if (newtoken) store.dispatch('setToken', newtoken) 
    console.log(response.data) 
    return response 
    }, function (error) { 
    switch (error.response.status) { 
     case 401: 
     store.dispatch('logoff') 
     break 
     default: 
     console.log(error.response) 
    } 
    return Promise.reject(error) 
    }) 

    return instance 
}

如何通过vue路由器和服务器提供的JWT令牌来管理用户的身份验证？

相关推荐