Node.js中如何通过请求头向前端传递JWT令牌（替代Cookie）

下面分三个核心部分修改代码，实现用请求头完成JWT的发放与验证：

1. 后端登录接口修改 #

把原本通过Cookie发送令牌的逻辑，改成将令牌和用户信息一起返回给前端（也可以通过响应头发送，但响应体返回更便于前端处理）：

const login = async (req, res) => {
    const {email, password} = req.body
    
    const user = await User.findOne({email})
    if(!user){
        throw new UnauthenticatedError('Invalid credentials')
    }

    const isPasswordCorrect = await user.comparePassword(password)
    if(!isPasswordCorrect){
        throw new UnauthenticatedError('Invalid credentials')
    }

    const token = user.createJWT()
    // 将token与用户数据一同返回，替代Cookie方案
    res.json({ user, token })
}

2. 验证中间件修改 #

从请求头的Authorization字段获取令牌（标准格式为Bearer <token>），替换原本从Cookie读取的逻辑：

const authMiddleware = async (req, res, next) => {
    // 读取请求头中的Authorization字段
    const authHeader = req.headers.authorization
    
    // 校验令牌是否存在且格式正确
    if(!authHeader || !authHeader.startsWith('Bearer ')){
        throw new UnauthenticatedError('No token provided or invalid format')
    }
    // 拆分出令牌部分
    const token = authHeader.split(' ')[1]

    try{
        const {userId, name} = jwt.verify(token, process.env.JWT_SECRET)
        req.user = {userId, name}  
        next()
    }
    catch(error){
        throw new UnauthenticatedError('Authentication invalid')
    }
}

3. 前端登录与请求处理修改 #

登录成功后将令牌存储到本地（推荐localStorage或sessionStorage），并通过axios拦截器让后续所有请求自动携带令牌：

登录组件修改 #

const handleLogin = async (e) => {
    e.preventDefault()
    try {
        const {data} = await axios.post('/auth/login', {email,password})
        successfulNotification('login successful')
        // 将token存入localStorage持久化
        localStorage.setItem('token', data.token)
        setUser(data.user)
        setRedirect(true)
    } catch (error) {
        errorNotification('login unsuccessful, please try again later')
        return error
    }        
}

全局axios拦截器配置（建议在axios实例文件中添加） #

// 给所有请求自动添加Authorization头
axios.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem('token')
        if(token){
            config.headers.Authorization = `Bearer ${token}`
        }
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

注意事项 #

• 一定要用HTTPS传输，防止令牌在网络中被窃听
• localStorage存在XSS攻击风险，确保前端代码没有注入漏洞；敏感场景可以改用sessionStorage（关闭标签页即清除）
• 前端登出时记得调用localStorage.removeItem('token')清除令牌

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