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

Question

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

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

此外，如何使用此会话来保护路由？ 我正在使用一个由react / redux / node / express组成的堆栈，并安静一些其他库。 我相信我可以在我的react-router中执行某些检查，但是在快递方面做这些不是更好吗？

Answer 1

您可以将令牌存储在localStorage或sessionStorage ，并将其包含在每个API请求中。

本地存储比标签更长，它存储在那里直到您明确地从中删除，因此刷新页面不会有问题。 即使关闭标签然后回来也不会。

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

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

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

使用react-router，您可以像示例中的官方repo一样通过onEnter钩子进行操作： https ： //github.com/reactjs/react-router/blob/master/examples/auth-flow/app.js

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

- PublicHandler 
  + SignIn
  + SignUp
  + Index

- ProtectedHandler
  + Dashboard
  + MoneyWithdrawal

Answer 2

它可能看起来像是sessionStorage （ JWT令牌是可访问的，直到浏览器或制表符关闭）

///action creator redux
export const signupUser = creds => dispatch =>{
    dispatch(requestSignup());

    return API.auth.signup(creds)
    .then(res =>  {
        sessionStorage.setItem('token', res.token);// <------------------
        dispatch(receiveSignup(res));
        return res;
    })
    .catch(err => {
            dispatch(SignupError(err));
         );
     });

};

在客户端：通过HOC redux-auth-wrapper处理auth

在服务器上的服务器上，您可以使用passport-jwt策略

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);
});

您不需要服务器上的会话