vueルータとサーバー提供のJWTトークンを使用してユーザーの認証を管理する方法は？

Question

フロントエンドにはvue/webpack、バックエンドにはnode.js/expressを使用してWebアプリケーションを構築しています。 node.jsのバックエンドは、ログイン、ログアウト、その他のCRUDのような操作にフロントエンドが使用するREST APIを公開しています。

サーバー側では、ログインREST APIがJWTトークンを設定し、vueアプリケーションのホームパスにリダイレクトします。 フロントエンド側では、vueコンポーネントのアクセス（ホームを含む）は、vueルータのbeforeEachメソッド（hereのサンプルに基づく）によって保護されます。

私のvueアプリケーションの中から、どのように私のvueコンポーネントが使用できるように（応答のHTTPヘッダーでログインREST APIによって設定された）JWTトークンにアクセスしてそれを私のvuexストアに格納できますか？それ？

ありがとうございました！ PS：私はNode.jsの8.5、Vueの2.4.4、Vueのルータ2.7、Vuex 2.4.1

Answer 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 
}