用户登录成功后如何在其他路由的请求头中添加Bearer授权标识？

登录侧存储token #

你当前的登录接口已经正常返回accessToken，首先需要在前端登录请求成功后将token持久化存储，小项目直接存入localStorage即可，修改你的登录请求代码如下：

const result = await fetch('/',{
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        loginEmail, loginPassword, reqType
    })
}).then((res) => res.json());

// 新增登录成功存储逻辑
if (result.status === 'ok') {
    localStorage.setItem('accessToken', result.accessToken);
    // 可补充登录成功后的跳转逻辑
} else {
    alert(result.error)
}

发起授权请求时添加Bearer头 #

后续调用需要登录权限的接口时，从存储中取出token，在请求头中添加Authorization字段，值格式为Bearer 你的token，示例代码如下：

// 读取本地存储的token
const accessToken = localStorage.getItem('accessToken');

// 示例：调用获取用户信息的授权接口
const userRes = await fetch('/api/getUserInfo', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        // 新增Bearer授权头，注意Bearer后面有一个空格
        'Authorization': `Bearer ${accessToken}`
    }
}).then(res => res.json());

后端token校验逻辑 #

后端需要新增授权校验中间件，解析请求头中的Bearer token并验证有效性，以Express框架为例：

// 授权校验中间件
const authenticateToken = (req, res, next) => {
    // 读取请求头中的Authorization字段
    const authHeader = req.headers['authorization'];
    // 分割Bearer前缀和token值，取第二个元素为实际token
    const token = authHeader && authHeader.split(' ')[1];

    // 无token直接返回401未授权
    if (!token) return res.sendStatus(401);

    // 验证token有效性
    jwt.verify(token, jwtSecret, (err, userInfo) => {
        // token过期/无效返回403禁止访问
        if (err) return res.sendStatus(403);
        // 将解析出的用户信息挂载到req对象，后续接口可直接取用
        req.user = userInfo;
        next();
    })
}

// 需要授权的接口绑定该中间件即可
app.get('/api/getUserInfo', authenticateToken, (req, res) => {
    res.json({
        status: 'ok',
        email: req.user.email
    })
})

注意事项 #

• 生成JWT时建议添加过期时间，避免token泄露后被长期滥用，修改你的登录逻辑中的jwt签名代码：

const accessToken = jwt.sign({
    email: response.email
}, jwtSecret, { expiresIn: '1h' }) // 1小时过期，可根据需求调整

• 若你的项目面向公网使用，建议将token存在HttpOnly属性的Cookie中，可降低XSS攻击窃取token的风险
• 注意Bearer和token之间的空格不能省略，否则会导致后端解析token失败

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