Axios 授权不起作用 - VueJS + Django答案

【问题标题】：Axios Authorization not working - VueJS + DjangoAxios 授权不起作用 - 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”对我不起作用。

【问题讨论】：

标签： django vue.js graphql axios graphene-django

【解决方案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;
 });

【讨论】：