如何在 vue 中存储、管理 REST API JWT 身份验证令牌？

Question

我是一个菜鸟，使用 vue.js 和节点身份验证 api，该 api 工作正常并在响应中提供 jwt 令牌，我的问题是如何在随后的所有请求中使用令牌（使用 axios） ，以及任何在前端处理令牌的最佳实践。

谢谢

Answer 1

您可以在您的 vuejs 应用程序中为您的场景使用类似的东西。

import axios from 'axios'

const API_URL = 'http://localhost:3000'

const securedAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

const plainAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

securedAxiosInstance.interceptors.request.use(config => {
  const method = config.method.toUpperCase()
  if (method !== 'OPTIONS' && method !== 'GET') {
    config.headers = {
      ...config.headers,
      'X-CSRF-TOKEN': localStorage.csrf
    }
  }
  return config
})

securedAxiosInstance.interceptors.response.use(null, error => {
  if (
    error.response &&
    error.response.config &&
    error.response.status === 401
  ) {
    return plainAxiosInstance
      .post('/refresh', {}, { headers: { 'X-CSRF-TOKEN': localStorage.csrf } })
      .then(response => {
        localStorage.csrf = response.data.csrf
        localStorage.signedIn = true

        let retryConfig = error.response.config
        retryConfig.headers['X-CSRF-TOKEN'] = localStorage.csrf
        return plainAxiosInstance.request(retryConfig)
      })
      .catch(error => {
        delete localStorage.csrf
        delete localStorage.signedIn

        location.replace('/')
        return Promise.reject(error)
      })
  } else {
    return Promise.reject(error)
  }
})

export { securedAxiosInstance, plainAxiosInstance }

在您的组件中，您可以使用它来处理您的 api 请求

Products.vue

export default {
  name: 'products',
  data () {
    return {
      products: [],
      newProduct: [],
      error: '',
      editedProduct: ''
    }
  },
  created () {
    if (!localStorage.signedIn) {
      this.$router.replace('/')
    } else {
      this.$http.secured.get('/api/v1/products')
        .then(response => { this.products = response.data })
        .catch(error => this.setError(error, 'Something went wrong'))
    }
  },
  methods: {
    setError (error, text) {
      this.error = (error.response && error.response.data && error.response.data.error) || text
    },
    addProduct () {
      const value = this.newProduct
      if (!value) {
        return
      }
      this.$http.secured.post('/api/v1/products/', { product: { name: this.newProduct.name } })
        .then(response => {
          this.products.push(response.data)
          this.newProduct = ''
        })
        .catch(error => this.setError(error, 'Cannot create product'))
    },
    removeProduct (product) {
      this.$http.secured.delete(`/api/v1/products/${product.id}`)
        .then(response => {
          this.products.splice(this.products.indexOf(product), 1)
        })
        .catch(error => this.setError(error, 'Cannot delete product'))
    },
    editProduct (product) {
      this.editedproduct = product
    },
    updateProduct (product) {
      this.editedProduct = ''
      this.$http.secured.patch(`/api/v1/products/${product.id}`, { product: { title: product.name } })
        .catch(error => this.setError(error, 'Cannot update product'))
    }
  }
}

Answer 2

您可以找到here 很多我个人在项目中使用的好模式以及 JWT 令牌处理方式。

要在浏览器中保存令牌，您可以使用 cookie、sessionStorage 或 localStorate，最后一个是现在最流行的（简短说明here）。

简而言之，您可以创建一个 axion 实例并在发送请求之前添加一个令牌。

const http = axios.create({
  baseURL: process.env.VUE_APP_SERVER_API,
  // here you can specify other params 
})

http.interceptors.request.use(request => {
  // Do something before request is sent
  request.headers['Authorization'] = `JWT ${TOKEN_HERE}`
  // some logic what to do if toke invalid, etc ...
  return request
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})