Vue JS 中的 Axios JWT答案

【问题标题】：Axios JWT in Vue JSVue JS 中的 Axios JWT
【发布时间】：2022-02-03 23:14:38
【问题描述】：

我正在尝试构建一个从我的 API 获取数据的应用程序（Nest.js 使用 Passport 进行身份验证）。我正在尝试向 Axios 提供从登录请求创建的 JWT（效果很好），但我不断收到 401 错误。

当我用 Postman 测试这些请求时，它工作正常。这是我的前端代码：

const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2NDM3OTg4NTEsImV4cCI6MTY0MzgwMjQ1MX0.dpnzkM9Jvgp3fIG8s9avXIjBw3a_1c9GNmUqbAYyRQw'

export const config = {
    headers: {
        Authorization : 'Bearer ' + token
    }
} 
export default {
    data() {
        return {
            projets: []
        }
    },
    mounted() {
        axios.get('http://localhost:3000/projet', config)
        .then(response => {
          this.projets = response.data
        })
        .catch(e => {
          console.log(e)
        })
    },
}

（令牌写在代码中是为了测试。）

【问题讨论】：

标签： node.js vue.js authentication jwt nestjs

【解决方案1】：

大多数情况下，当您收到带有 JWT 的 401 时，JWT 要么已过期，要么签名无效。要获取有关 JWT 问题的更多信息，您可以使用像 jwt.io 这样的调试器，或者您可以将一些额外的日志添加到您的警卫中

@Injectable()
export class JwtGuard extends AuthGuard('jwt') {
  handleRequest(err, user, info, context, status) {
    console.log({
      err,
      info,
      user,
      context,
      status,
    })
    return super.handleRequest(err, user, info, context, status)
  }
}

【讨论】：

非常感谢您的宝贵时间！我会检查一下:)

【解决方案2】：

原来我的 JWT 没有有效的签名（我不知道为什么，因为我使用了 JWTService.sign）但是，从 jwt.io 正确签名后，我仍然有 401 错误... 我不知道该怎么办

【讨论】：