javascript - 选项卡打开时持续的 session 的身份验证逻辑

Question

假设您正在开发一个通过第 3 方 API 执行身份验证的前端应用程序。成功的身份验证返回一个 json 网络 token 。

当用户在网站上处于事件状态时(即不关闭选项卡或浏览器)存储此类 token 并为用户创建某种 session 的最佳做法是什么，但是刷新/重新加载页面不应破坏此类 session 。

还有，这个session怎么用来保护路由呢？我正在使用由 react/redux/node/express 和其他一些库组成的堆栈。我相信我可以在我的 react-router 中执行某些检查，但是在 express 端执行这些不是更好吗？

Answer 1

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

Local storage超过选项卡，它会存储在那里，直到您明确地从中删除，所以刷新页面不会有问题。即使关闭标签然后再回来也不会。

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

至于保护路由，服务器显然应该检查对所有 protected API 路由的请求的 token 。

在浏览器端，如果用户尝试访问 protected 路由但 token 不存在(或无效)，您可能希望显示登录表单。

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

另一种方法是创建两个顶级组件，一个用于 protected 路由，一个用于公共(public)路由(如登陆页面或登录/注册表单)。然后， protected 处理程序将在 componentWillMount 中检查是否有 token :

- PublicHandler 
  + SignIn
  + SignUp
  + Index

- ProtectedHandler
  + Dashboard
  + MoneyWithdrawal