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

Posted 2023-02-23

【中文标题】如何通过 vue 路由器和服务器提供的 JWT 令牌管理用户身份验证？

【英文标题】：How to manage authentication of a user through a vue router and a server-provided JWT token?

【发布时间】：2018-03-17 13:14:16

【问题描述】：

我正在构建一个 web 应用程序，前端使用 vue/webpack，后端使用 node.js/express。 node.js 后端公开了 REST API，前端用于登录、注销和其他类似 CRUD 的操作。

在服务器端，登录 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 Router 2.7、Vuex 2.4.1

【参考方案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