Axios 授权不起作用 - VueJS + Django

Posted 2023-03-08

【中文标题】Axios 授权不起作用 - VueJS + Django

【英文标题】：Axios Authorization not working - VueJS + Django

【发布时间】：2020-07-22 12:27:04

【问题描述】：

我正在尝试使用 VueJS 和 Django 构建应用程序。我也在使用 Graphene-Django 库，因为该项目使用 GraphQL。

现在，身份验证工作正常，我得到了一个 JWT 令牌。 但是当我将令牌用于需要身份验证的其他查询时，我在 Vue 中遇到了这个错误：

"Error decoding signature"

Django 日志也返回这个：

graphql.error.located_error.GraphQLLocatedError: Error decoding signature

jwt.exceptions.DecodeError: Not enough segments

ValueError: not enough values to unpack (expected 2, got 1)

奇怪的是，在 Postman 中执行相同的查询却可以正常工作。

正如我在标题中提到的，我的请求使用 Axios，这里是一个请求示例：

axios(
  method: "POST",
  headers:  Authorization: "JWT " + localStorage.getItem("token") ,
  data: 
    query: `
        dailyAppoint (today: "$today") 
            id
            dateTime
        
     `
    
);

注意：它使用“JWT”而不是“Bearer”，因为不知何故“Bearer”对我不起作用。

【参考方案1】：

好的，有几个问题，如果没有来自 curl 的 Vue.js，你的 API 是否可以工作。生成令牌，从 curl 检查 API。

如果是，则检查从请求发送的标头，来自 Network Inspector、mozilla dev tools/chrome devtools。并使用这些 RAW 标题更新您的帖子。

当您的公钥无法解码由您的私钥签名的字符串 [token] 时，会出现此特定错误。这最终意味着访问令牌已被篡改。这也可能意味着您正在发送诸如“未知”之类的值——JS 状态初始化错误。

检查请求的 RAW 标头。会有帮助的。

【讨论】：

我按照您的建议检查了 Chrome devtools，确实它正在发送：Authorization: JWT undefined您知道如何解决这个问题吗？

获得令牌后，是否将其放在本地存储中，如果有，请共享该代码。

我为我的请求添加了一个 Axios 拦截器。显然这是最好的做法，现在它可以工作了。

【参考方案2】：

使用请求拦截器设置授权标头：

axios.interceptors.request.use(config => 
   if (localStorage.getItem("token") != null)
     config.headers["Authorization"] = "JWT " + localStorage.getItem("token");
   return config;
 );