【问题标题】:Doubts about Json web token and users' sessions controlJson web token与用户会话控制的质疑
【发布时间】:2020-11-27 09:07:16
【问题描述】:

嗯,我刚刚学习了 Nodejs 的基本后端开发课程,可以说我是 Web 开发领域的新手。在课程的一个模块中,我学习了如何使用 Json Web 令牌保护我的后端路由,现在我开始使用 reactjs 为前端开发基本聊天,并使用 Nodejs 开发我的后端。但是现在我正在考虑页面的安全性,我想到了许多课程中没有解释的问题。我计划通过登录发送 JWT 来验证用户是否可以访问页面路由。因此,考虑到这一事实,以下是我的问题:

  1. 如何从前端获取令牌?

我参加的课程完全专注于后端,因此我与邮递员一起发送请求并将来自响应的数据存储在环境变量中。所以我不知道如何从前端获取令牌(我不知道我是否可以从缓存存储的任何一侧获取它,或者我需要将它保存在数据库或其他东西中)。

  1. 如何撤销令牌?

好吧,我知道我可以为令牌指定过期时间,但在这种情况下,我不希望它过期,除非用户从页面注销。我从一些网站上了解到,删除它并不容易,但他们建议从客户端和服务器端删除令牌,将令牌保存在包含未达到其到期时间的令牌的禁止列表中但它们不再可用。

  1. 最后一个是,如何刷新jwt?

好吧,我不知道这个问题是否正确,但就是这样,我认为它与第二个问题有关。想象一下,我不希望令牌永远持续下去,而是希望令牌在一周内到期,以防用户整周都没有进入,但是一旦用户进入,时间到期就会刷新。简而言之,我希望用户可以保持登录状态,除非他在一周内没有进入该页面。最实际的做法是什么?

不用多说,感谢您的阅读,如果您有任何提示或代码示例来解决我的问题,我将不胜感激。谢谢。

【问题讨论】:

    标签: node.js reactjs jwt frontend backend


    【解决方案1】:

    如何从前端获取令牌? 令牌应作为 REST API header 的一部分发送。发送token的方式有很多种,但最适合的是设置一个Authorization Bearer Header。

    更多关于授权here

    例如:

      headers: req.headers.set('Authorization', 'Bearer ' + authToken)
    

    在 NodeJS 中,如果您使用 express,您可以编写中间件来检索令牌:

        const jwt = require('jsonwebtoken');
        module.exports = (req, res, next) => {
          try {
            const token = req.headers.authorization.split(' ')[1];
            jwt.verify(token, "your_token_secret");
            next();
          } catch (error) {
              res.status(401).json({
                message: 'Invalid Token'
              });
          }
        };
    

    如何撤销令牌?

    在您的前端应用程序中将令牌存储在localStorage 中所需的时间,并在加载应用程序时检查本地存储令牌是否存在且未过期授权否则再次请求登录,这将生成一个新令牌像这样:

            onAppLoad() {
                 saveAuthData(token_from_backend, date_from_backend);
            }
        
        saveAuthData(token: string, expirationDate: Date) {
            localStorage.setItem('token', token);
            localStorage.setItem('expiration', expirationDate.toISOString());
          }
        
            clearAuthData() {
                localStorage.removeItem('token');
                localStorage.removeItem('expiration');
            }
        
            getAuthData() {
                const token = localStorage.getItem('token');
                const expiration = localStorage.getItem('expiration');
                if (!token || !expiration) {
                  return;
                }
                return {
                  token: token,
                  expirationDate: new Date(expiration)
                };
              }
    

    如果令牌有效,您也可以自动登录用户而不要求提供登录凭据

        autoAuthUser() {
              const authInformation = getAuthData();
              const now = new Date();
              const expiresIn = authInformation.expirationDate.getTime() - now.getTime();
              if (expiresIn > 0) {
                token = authInformation.token;
                isAuthenticated = true;
                setAuthTimer(expiresIn / 1000);
               
              }
          }
    

    设置计时器以撤销令牌,因为此时令牌应该存在于 localStorage 中,然后删除它或用刷新的令牌替换它

    setAuthTimer(duration: number) {
       tokenTimer = setTimeout(() => {
          this.logout();
        }, duration * 1000);
      }
    

    【讨论】:

    • 如何将令牌存储在 httpOnly cookie 中并将 cookie 的过期日期设置为与令牌相同?令牌过期时 cookie 会自动清除
    • 是的,但是如果我们不构建像在线购物车这样需要跟踪用户订单的东西,我们应该尝试使服务器无状态,我们应该避免使用 cookie 以避免 cookie 窃取、xss 漏洞等。
    • @Navitas28 谢谢,这就是我要找的。​​span>
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-05
    • 2016-11-28
    • 1970-01-01
    • 2021-08-14
    • 1970-01-01
    • 2015-07-08
    相关资源
    最近更新 更多