Angular与Node中直接访问URL时的JWT认证解决方案咨询

咱们先理清楚问题根源：你直接在浏览器地址栏输URL访问/user/profile时，浏览器发起的是原生GET请求，不会带上Angular拦截器给AJAX请求加的Authorization头——因为拦截器只作用于Angular应用内部发起的HTTP请求，而地址栏访问是浏览器独立发起的，自然拿不到存在localStorage里的JWT令牌，所以Passport.js返回未授权。

下面给你两个方向的优雅解决方案，以及替代Passport.js的思路：

一、基于Passport.js的优雅解决方法：把JWT存在HttpOnly Cookie中 #

这是最彻底的后端层面解决方案，让浏览器自动为所有请求（包括地址栏访问）携带令牌：

1. 登录成功时设置HttpOnly Cookie
   在Node端的登录接口中，不要把JWT返回给前端存在localStorage，而是直接设置成HttpOnly、Secure（生产环境）的Cookie：

   // 登录接口示例
   router.post('/login', (req, res) => {
     // 验证用户逻辑...
     const token = jwt.sign({ id: user.id, email: user.email }, process.env.JWT_SECRET, { expiresIn: '1h' });
     // 设置Cookie
     res.cookie('jwt_token', token, {
       httpOnly: true, // 防止前端JS读取，提升安全性
       secure: process.env.NODE_ENV === 'production', // 生产环境用HTTPS才生效
       sameSite: 'strict', // 防止CSRF攻击
       maxAge: 3600000 // 令牌有效期1小时
     });
     res.json({ message: '登录成功' });
   });
   

2. 修改Passport.js的JWT策略，从Cookie提取令牌
   默认Passport.js的JWT策略只从Authorization头取令牌，现在要新增从Cookie提取的逻辑：

   const JwtStrategy = require('passport-jwt').Strategy;
   const ExtractJwt = require('passport-jwt').ExtractJwt;
   const passport = require('passport');
   
   const opts = {
     secretOrKey: process.env.JWT_SECRET,
     // 自定义令牌提取逻辑：优先从Authorization头取，再从Cookie取
     jwtFromRequest: ExtractJwt.fromExtractors([
       ExtractJwt.fromAuthHeaderAsBearerToken(),
       (req) => {
         let token = null;
         if (req && req.cookies) {
           token = req.cookies.jwt_token;
         }
         return token;
       }
     ])
   };
   
   passport.use(new JwtStrategy(opts, (payload, done) => {
     // 你的用户查询逻辑，比如从数据库找对应用户
     User.findById(payload.id)
       .then(user => {
         if (user) {
           return done(null, user);
         }
         return done(null, false);
       })
       .catch(err => done(err, false));
   }));
   

这样改造后，不管是Angular内部发起的请求，还是浏览器地址栏直接访问，浏览器都会自动携带Cookie里的JWT，Passport.js就能正常验证用户身份了。

二、替代Passport.js：自定义JWT验证中间件 #

如果你觉得Passport.js太重量级，完全可以自己写一个轻量的中间件来处理JWT验证，灵活性更高：

const jwt = require('jsonwebtoken');

// 自定义JWT认证中间件
const authenticateJWT = (req, res, next) => {
  // 从Authorization头或Cookie提取令牌
  const token = req.headers.authorization?.split(' ')[1] || req.cookies.jwt_token;

  if (!token) {
    return res.status(401).json({ message: '未授权，请先登录' });
  }

  // 验证令牌
  jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
    if (err) {
      return res.status(403).json({ message: '令牌无效或已过期' });
    }
    // 将解码后的用户信息挂载到req对象，供后续路由使用
    req.user = decoded;
    next();
  });
};

// 使用中间件保护路由
router.get('/user/profile', authenticateJWT, (req, res) => {
  // 直接使用req.user获取用户信息
  res.json({ id: req.user.id, email: req.user.email });
});

这个中间件完全由你控制令牌的提取和验证逻辑，没有Passport的额外依赖，适合简单的JWT认证场景。

为什么你的临时方案不够优雅？ #

你之前的/isauthenticated接口方案是前端层面的校验：Angular组件先调用接口验证身份，再决定是否显示页面。但这个方案有两个问题：

1. 后端的/user/profile路由依然无法直接通过地址栏访问，因为浏览器请求还是不带令牌；
2. 如果用户绕过前端直接访问后端路由，还是会被拦截，本质上没解决后端令牌获取的问题。

而上面的Cookie方案是从根源解决：让浏览器自动携带令牌，不管请求来源是哪里，后端都能拿到令牌完成验证。

内容的提问来源于stack exchange，提问作者The_Wolf