Node.js中passport-jwt的JWT发送、提取配置及浏览器访问未授权问题排查

检索了大量使用JWT extractors从请求中提取令牌的在线示例后，始终无法明确用户完成登录后，发起后续请求时应当如何携带token。

• 通过Postman测试时，在Authorization标签页选择Bearer Token类型，填入的token会被自动附加到Authorization请求头中，此时请求http://localhost:5000/profile可正常访问成功。
• 但登录流程完成后，直接在浏览器中访问受保护的http://localhost:5000/profile接口，始终返回Unauthorized报错。

相关截图参考

• Postman操作截图：
• 浏览器报错截图：

参照passport-jwt官方文档完成的JWT策略配置如下：

passport.use(
  new JWTStrategy(
    {
      jwtFromRequest: ExtractJWT.fromAuthHeaderAsBearerToken(),
      secretOrKey: "mysecret",
    },
    function (jwtPayload, done) {
      return User.findOne({ username: jwtPayload.username })
        .then((user) => {
          return done(null, user);
        })
        .catch((err) => {
          return done(err);
        });
    }
  )
);

登录路由的具体实现代码如下：

Router.post("/", (req, res, next) => {
  passport.authenticate("local", { session: false }, (err, user, info) => {
    if (err) return next(err);
    if (!user) {
      return res.redirect("/login?info=" + info);
    }
    req.logIn(user, { session: false }, (err) => {
      if (err) return next(err);
      const token = jwt.sign({ username: user.username }, "mysecret");
      res.json({ user, token: `Bearer ${token}` });
    });
  })(req, res, next);
});

内容的提问来源于stack exchange，提问作者Ala Eddine Menai