如何将授权：“JWT <token>”添加到 http 请求？在 Nuxt.js 中答案

【问题标题】：how can i add Authorization : "JWT <token>" to http request ? in Nuxt.js如何将授权：“JWT <token>”添加到 http 请求？在 Nuxt.js 中
【发布时间】：2021-09-25 17:25:41
【问题描述】：

我正在使用 Nuxtjs 进行开发并使用 nuxtauth。

我正在尝试将内容“JWT”提供给 http 请求的授权。

但是，即使我更改了要通过编码给出的字符串，也会发送“Bearer”并且我收到 401 错误。

在控制台中可以看到形成的文本（包括 JWT）。

流程如下。

<template>
  <div>
    <button @click="getUserInfo">get user data</button>
    <div>
      {{ responseData }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pretoken: this.$auth.strategy.token.get(),
      responseData: {}
    };
  },
  methods: {
    async getUserInfo() {
      const url = "/server/v1/mypages/";
      const pretoken = this.pretoken;
      const fixedtoken = pretoken.replace("Bearer", "JWT");
      console.log(fixedtoken);
      this.$axios.setHeader("Authorization", fixedtoken);
      this.responseData = await this.$axios.get(url);
    }
  }
};
</script>

我怎样才能做到这一点？

【问题讨论】：

你在哪里调用http请求？
@hoangdv 哎呀！我出于调试目的删除了代码，然后更新了帖子。对不起，谢谢你告诉我！
在整个项目中搜索Bearer关键字。我猜你在某处有一个 axios 拦截器......

标签： jwt authorization nuxt.js bearer-token nuxt-auth

【解决方案1】：

试试下面的代码，它应该可以工作

const config = { headers: { 'Authorization': fixedtoken } };
this.responseData = await this.$axios.get(url, config);

【讨论】：

谢谢！我尝试了这种方法，但没有奏效。请求的授权仍然是 Bearer ...我在控制台中检查了配置，但它显示了标题：{Authorization：“JWT ”}，我不知道为什么:_(
@dore，尝试将此选项添加到您的 auth/nuxt 配置中。 auth: { token: { global: false, } }，使用 $axios 会自动发送您的令牌，并且可能会覆盖您的令牌。我希望它对你有用。
这是一个绝对的解决方案！但是，准确地说，当我将 Nuxtconfig 设置为如下auth:{ strategies:{ local:{ token: { global: false, }, ...... } } } 时，它在我的环境中正常工作@ 谢谢你，我可以继续开发！非常感谢！