如何通過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

來源

2017-10-05 Jean-Baptiste

使用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 
}

來源

2017-10-31 01:09:05

如何通過vue路由器和服務器提供的JWT令牌來管理用戶的身份驗證？

回答

相關問題