如何将 jwt 令牌从 Web 浏览器上的本地存储传输到服务器后端？答案

【问题标题】：How do I transfer a jwt token from local storage on the web browser to the server backend?如何将 jwt 令牌从 Web 浏览器上的本地存储传输到服务器后端？
【发布时间】：2022-02-05 01:17:32
【问题描述】：

我目前正在设计一个简单的网站，用户可以在其中以普通用户或管理员身份登录。现在我正在编写用户想要访问仅限管理员网页的部分，服务器将检索存储在 Web 浏览器本地存储中的 jwt 令牌以对其进行验证。

这就是本地存储的样子

这是获取 jwt 令牌的代码

var verifyFn = {
verifyToken: function (req, res, next) {
    const authHeader = localStorage.getItem("jwt_token");
    console.log("THIS IS THE HEADER")
    console.log(authHeader)
    
    if (authHeader === null || authHeader === undefined ){
    return res.status(401).send({ message: 'not authenticated BEARER TOKEN ISSUE' });
    }

    const token = authHeader
    console.log("NEW TOKEN")
    console.log(token)
    jwt.verify(token, config.jwt.secret, { algorithms: ['HS256'] }, (err, decoded) => {
        if (err) return res.status(401).send({ message: 'not authenticated' });
        req.decodedToken = decoded;
        console.log("DECODED TOKEN: " + req.decodedToken)
        next();
    });
}

但是，每当我尝试运行服务器并浏览到管理页面时，都会出现错误提示“未定义本地存储”。因此，我不确定如何将 jwt_token 从 Web 浏览器检索到服务器后端。

【问题讨论】：

服务器无法访问localStorage，因为它是浏览器功能。通常，您会希望在 Authorization 标头中发送令牌。
通常情况下，您会将令牌与标头中的每个请求一起发送。在您的情况下，您会允许页面上的人，然后手动尝试从存储中获取令牌？似乎是多余的。

标签： javascript json server jwt token

【解决方案1】：

服务器无法访问浏览器的localStorage 对象，因为它只能从客户端访问，并且不存在于服务器上下文中。

通常所做的是在Authorization 标头中发送令牌。看起来您正在使用Node，因此请考虑使用客户端上的 fetch API 的以下示例请求：

const jwtToken = localStorage.getItem('jwt_token')

fetch('your-api-url', {
  method: 'request method here',
  headers: {
     Authorization: `Bearer ${jwtToken}`
  },
  body: JSON.stringify(your request body here)
}).then(response => ...)

在服务器中，您可以通过查看请求标头来获取 JWT 令牌，如下所示：

var verifyFn = {
verifyToken: function (req, res, next) {
    let authHeader = req.headers['Authorization']
    // the auth header will have Bearer prepended, so remove it
    authHeader = authHeader.replace('Bearer ', '')
    console.log("THIS IS THE HEADER")
    console.log(authHeader)
    
    if (authHeader === null || authHeader === undefined ){
       return res.status(401).send({ message: 'not authenticated BEARER TOKEN ISSUE' });
    }

    const token = authHeader
    console.log("NEW TOKEN")
    console.log(token)
    jwt.verify(token, config.jwt.secret, { algorithms: ['HS256'] }, (err, decoded) => {
        if (err) return res.status(401).send({ message: 'not authenticated' });
        req.decodedToken = decoded;
        console.log("DECODED TOKEN: " + req.decodedToken)
        next();
    });
}

【讨论】：