如何从标头中正确获取 jwt 令牌并将其与 express 一起使用

Posted 2023-03-10

【中文标题】如何从标头中正确获取 jwt 令牌并将其与 express 一起使用

【英文标题】：How to properly get jwt token from headers and use it with express

【发布时间】：2021-10-07 04:32:20

【问题描述】：

我在 express.js 中使用身份验证和授权（jwt）创建了前端和后端，现在，当我尝试登录时，jwt-token 已正确设置，如下图所示：（auth-token 密钥）

但是我如何获取标题然后使用它以便用户访问他/她的数据？

这就是我在登录过程中创建令牌的方式

  const token = jwt.sign(_id: user._id, "SECRET");
  
  res.header("auth-token", token).send(status: "done", token: token);

这是一个用于验证的中间件

module.exports = function (req, res, next) 
  
  //getting the token from headers to check if token is present or not
  const token = req.header("auth-token");
  if(!token) return res.status(401).send("Access Denied");
  
  try 
    const verified = jwt.verify(token, "SECRET");
    req.user = verified;
    next();
   catch(err) 
    res.status(400).send("Token is Invalid")
  

这是我的 server.js 文件的一部分

app.user(express.json());

app.use("/user", verifyJWT);

app.get("/user", (req, res) => 
  res.sendFile(__dirname + "/frontend/userDetails.html")
);

现在每次我登录并访问 /user 路由时，它都会显示“拒绝访问”我做错了什么？

【参考方案1】：

服务器将标头发送回浏览器并不意味着浏览器需要开始在每个请求中包含该标头。

每当您的客户端向您的服务器发送请求时，它必须手动 （使用包装器或库）将auth-token 标头添加到请求中。如果您希望浏览器自动为每个请求添加标头，您可能希望使用 cookie。

【讨论】：

您能告诉我如何手动操作吗？我搜索了它，但它们都在我完成的地方。对不起，如果它是初学者水平的疑问

我不知道您在前端使用什么库来处理 HTTP 请求。您的问题是 Express.js，但据我所知，这是一个（仅限服务器端）HTTP 服务器，而不是客户端。

我使用 vanilla javascript 作为前端，使用 express.js 作为后端

那么你可能会使用fetch 或jQuery （不是普通的，但很常见），它们都支持标头。几乎所有支持执行 HTTP 请求的客户端库都支持添加标头。检查他们的文档。

是的，我知道，我知道fetch，我在这个项目中使用它。我的疑问是首先将请求发送到服务器，然后服务器决定是否授予该用户访问权限，具体取决于他/她的登录状态（使用 jwt），那么如何将令牌从客户端传递到服务器？你明白了吗？