Axios 授权不起作用 - VueJS + Django

Question

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

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

"Error decoding signature"

Django 日志也 returns 这个：

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' 对我不起作用。

Answer 1

好吧，有几个问题，你 API 在没有 Vue.js curl 的情况下工作吗？生成令牌，从 curl 检查 API。

如果是，则检查从请求发送的 Headers，来自 Network Inspector，mozilla dev tools/chrome devtools。并用那些 RAW Headers.

更新你的 Post

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

检查请求的 RAW headers。会有帮助。

Answer 2

使用请求拦截器设置授权header:

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

Axios 授权不起作用 - VueJS + Django

Axios Authorization not working - VueJS + Django

django

vue.js

graphql

axios

graphene-django