Javascript 在选项卡打开时持续的会话的身份验证逻辑

假设您正在使用通过第三方api执行身份验证的前端应用程序。成功的身份验证返回一个json web令牌

当用户在网站上处于活动状态（即未关闭选项卡或浏览器）时，存储此类令牌并为其创建某种会话的最佳做法是什么，但刷新/重新加载页面不应破坏此类会话

---

此外，如何使用此会话来保护路由？我正在使用由react/redux/node/express和quiet几个其他库组成的堆栈。我相信我可以在react路由器中执行某些检查，但是在express端执行这些检查不是更好吗？

您可以将令牌存储在

localStorage

或

sessionStorage

中，并将其包含在每个API请求中

在选项卡过期之前，它一直存储在那里，直到您从中显式删除，因此刷新页面不会有问题。即使关闭一个标签，然后回来也不会是一件好事

允许您存储数据。页面刷新是可以的，但选项卡关闭不是，这更接近您想要的行为

至于保护路由，服务器显然应该检查对所有受保护API路由的请求上的令牌

在浏览器端，如果用户试图访问受保护的路由，但令牌不存在（或无效），则可能需要显示登录表单

使用react router，您可以通过

oneter

hooks，按照示例中的官方回购协议进行操作：

另一种方法是创建两个顶级组件，一个用于受保护的路由，一个用于公共路由（如登录页或登录/注册表单）。然后受保护的处理程序将在

componentWillMount

中检查是否有令牌：

- PublicHandler 
  + SignIn
  + SignUp
  + Index

- ProtectedHandler
  + Dashboard
  + MoneyWithdrawal

---

它可能看起来是这样的，带有会话存储（令牌是可访问的，直到浏览器或选项卡关闭）

然后只需添加路由处理程序

var checkJWT = passport.authenticate('jwt')

router.get('/protected',checkJWT, (req, res) =>{
    res.json(req.user);
});

---

您不需要在服务器上进行会话

我刚想到一个想法，如果有人使用随机字符串设置会话，他们将获得对

/dashboard

的访问权限，显然他们不会在那里看到任何数据，因为随机字符串不是有效的令牌，但是仍然可以访问受限路由但是如果没有后端，它将无法使用。您可以做的是，首先使用令牌调用服务器，查看它是否有效。如果是-一切正常，如果不是，重定向到登录表单。

passport.use('jwt',new JwtStrategy(opts, function(jwt_payload, done) {
        User.findOne({where:{ id: jwt_payload.user.id }}).then(user=>{
            if (user) {
                done(null, jwt_payload.user);
            } else {
                done(null, false);
                // or you could create a new account
            }
        },err=>{
            console.log('Error ',err);
            return done(err,false);
        });

    }));

var checkJWT = passport.authenticate('jwt')

router.get('/protected',checkJWT, (req, res) =>{
    res.json(req.user);
});