Question

我正在使用前端的vue / webpack和后端的node.js / express构建一个Web应用程序。 node.js后端正在暴露REST API，前端使用这些REST登录，注销和其他类似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

Answer 1

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令牌管理用户的身份验证？

1 个答案: