如何用JQuery从LocalStorage向Node.js后端传递JWT？问题求助

我帮你梳理下核心问题和对应的解决办法：

核心问题：登录后的跳转逻辑错误 #

你登录成功后的代码里，那个带beforeSend设置请求头的AJAX请求其实根本没起到作用！原因是你在success里直接写了success:location.href="http://localhost:3000/users/user"——这种写法是错误的，success应该接收一个函数，而你这里直接赋值了跳转语句，导致这条跳转指令会立即执行，浏览器直接发起一个全新的GET请求跳转到用户页面，这个跳转请求是浏览器原生发起的，不会携带你设置的auth请求头。

这就是为什么你在中间件里看到先输出string（来自那个没生效的AJAX请求），之后输出undefined（来自浏览器跳转的GET请求）。

一步步解决 #

1. 修复登录AJAX的逻辑 #

先把登录成功后的代码改成正确的写法，确保token存入LocalStorage后再跳转，不需要额外发起一次AJAX请求：

$('.logInForm').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: 'http://localhost:3000/users/authenticate',
        data: $(this).serialize(),
        success:function(data){
            console.log(data);
            if(data.token){
                localStorage.setItem("Authorization",data.token);
                // 直接跳转到用户页面，后续请求再统一携带token
                location.href="http://localhost:3000/users/user";
            }
        }
    });
    e.preventDefault();
});

2. 在用户页面全局配置AJAX请求头 #

跳转到/users/user页面后，在该页面的脚本中添加全局AJAX设置，让所有后续的AJAX请求自动带上token，不用每次都手动写beforeSend：

// 用户页面的JS代码
$(function(){
    // 全局配置：所有AJAX请求自动携带auth头
    $.ajaxSetup({
        beforeSend: function(xhr) {
            const token = localStorage.getItem("Authorization");
            if(token){
                xhr.setRequestHeader('auth', token);
            }
        }
    });

    // 示例：发起需要权限验证的接口请求
    $.ajax({
        type:'get',
        url:'http://localhost:3000/api/your-protected-api',
        success:function(data){
            // 处理返回的数据
            console.log(data);
        }
    });
});

3. 优化服务端中间件（可选） #

可以让中间件兼容更多的请求头格式，比如同时支持auth和标准的Authorization头（如果后续想改成标准JWT格式的话）：

router.use(function(req, res, next) {
    // 同时从auth和authorization头获取token
    let token = req.headers['auth'] || req.headers['authorization'];
    // 如果用标准Bearer格式，可添加这行：token = token?.split(' ')[1];
    console.log(typeof(token));
    
    if (token) {
        jwt.verify(token, config.JWT_SECRET, function(err, decoded) {
            if (err) {
                console.log(err);
                return res.json({ success: false, message: 'Failed to authenticate token.' });
            } else {
                req.decoded = decoded;
                next();
            }
        });
    } else {
        return res.status(403).json({ success: false, message: 'No token provided.' });
    }
});

额外提醒 #

• 标准的JWT传递方式是用Authorization头，值为Bearer <你的token>，如果后续想遵循规范，可以调整客户端的请求头设置为xhr.setRequestHeader('Authorization', 'Bearer ' + token)，服务端对应解析即可。
• LocalStorage存在XSS风险，要确保你的页面没有XSS漏洞，避免token被恶意脚本窃取。

内容的提问来源于stack exchange，提问作者K.Karapetyan