如何使用Node.js和jsonwebtoken后端实现Vue.js的授权认证？

Question

我正在学习 vuejs 和 nodejs 来为即将推出的学生项目设置身份验证。

为此，我创建了一个 API，允许创建角色卡，单击该卡可以查看角色的历史记录。

它工作得很好，所以我攻击了身份验证部分，我设法允许创建用户并将最后一个与 jsonwebtoken 连接，并且一切都在后端运行，但是当我在前端时，可以访问字符当用户连接时不起作用，并返回我编写的错误（如果没有任何作用）。我想指定，当我连接时，令牌已创建良好，因为后端使用用户 ID 很好地返回了它，但是当我到达字符页面并查看请求的标头时，我没有看到“授权：持有者”令牌”。而且我不知道除了检索字符列表之外，我是否应该在前端进行任何其他操作。

我想知道问题是否不是来自我下载的 npm“cors”包并重写了请求标头的权限，但没有任何效果。

我想指定我使用 axios 来获取我的字符列表。

我可以在登录请求中获取令牌，但我不知道如何使用它来允许用户访问字符

这是登录工作并重定向到字符列表时出现的未经授权的错误：

这里是来自后端的身份验证中间件：

这是我使用身份验证中间件的路线：

抱歉，如果我遗漏了一些关于如何在这里写一个好问题的内容，我不习惯 stackoverflow，所以如果我必须提供更多具体信息，请在评论中告诉我

感谢您的阅读

Answer 1

您应该为每个需要身份验证的请求设置授权标头。

如果您对请求使用自定义 axios 实例，则可以使用拦截器指定授权标头，例如：

axiosInstance.interceptors.request.use(config => {
  const token = /* your token */;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

或者，如果您不使用这样的实例，您可以将其设置为：

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;