剖析Vue的请求拦截器与JWT校验: 打破前端和后端信息传递壁垒

2023-09-28 21:29:19

Vue中的JWT授权之谜：解除后端接收JWT的障碍

在Vue应用中，使用JWT（JSON Web Token）进行用户授权时，有时我们会遇到这样一个令人头疼的问题：明明在请求拦截器中已经添加了JWT，后端却无法获取到Authorization信息。这是为什么呢？今天，我们就来深入探究这个问题，找到解决之道。

抽丝剥茧，探寻问题根源

要解决这个问题，我们需要从源头开始，一步步抽丝剥茧，找出问题的症结所在：

检查JWT是否有效： JWT是有时限的，如果过期或无效，后端将无法从中获取有效信息。
确认JWT格式正确： JWT的格式必须严格遵守RFC 7519标准，否则后端无法解析它。
查看请求头是否携带Authorization： 请求头中必须包含Authorization信息，其格式为"Bearer "，后面紧跟JWT。
确保后端能够解析JWT： 后端需要使用相应的JWT解析库来解析JWT，如果没有安装或配置正确，就无法解析。

对症下药，解决问题

查明了问题根源，我们就可以对症下药，解决问题了：

如果JWT无效， 重新生成一个新的JWT。
如果JWT格式不正确， 修改JWT的格式，使其符合RFC 7519标准。
如果请求头中没有携带Authorization， 在请求拦截器中添加Authorization信息。
如果后端无法解析JWT， 安装或正确配置JWT解析库。

代码示例

在Vue的request拦截器中添加Authorization信息的代码示例：

import Vue from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import jwt_decode from 'jwt-decode'

Vue.use(VueAxios, axios)

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('accessToken')
  if (token) {
    // 检查JWT是否有效
    const decoded = jwt_decode(token)
    if (decoded.exp < Date.now() / 1000) {
      // JWT已过期，重新生成一个新的
      // ...省略重新生成JWT的代码...
    }
    // 添加Authorization信息
    config.headers['Authorization'] = `Bearer ${token}`
  }
  return config
}, error => {
  // 处理请求错误
})