javascript - 如何在 React Router V4 上正确实现 JWT 身份验证路由

Question

使用 RR V4 文档，这是 PrivateRoute(或 AuthenticatedRoute)的示例代码

const AuthExample = () => (
  <Router>
    <div>
      <AuthButton/>
      <ul>
        <li><Link to="/public">Public Page</Link></li>
        <li><Link to="/protected">Protected Page</Link></li>
      </ul>
      <Route path="/public" component={Public}/>
      <Route path="/login" component={Login}/>
      <PrivateRoute path="/protected" component={Protected}/>
    </div>
  </Router>

PrivateRoute 可以实现为:

const PrivateRoute = ({ component: Component, ...rest }) => (

  let token - localStorage.getItem('jwtToken');

  <Route {...rest} render={props => (
    token ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

我的疑问是:

a) 检查 token 是否存储在本地以让应用程序渲染组件是否足够？

b) 如果 token 过期了，如何避免加载新组件？

c) 我是否应该在 PrivateRoute 开头调用服务器来检查 token 过期和有效性？这将在每次路由更改时增加到服务器的另一个往返。

d) 在不接触服务器的情况下验证 token 的正确方法是什么？

Answer 1

我不使用 React，但我对 JWT token 有一些经验。

恕我直言，客户端在任何时候都不应该有权访问 token 。它应该存储在 cookie 中，并在每次调用服务器时发送，服务器应该是唯一拥有解密它并访问其内容的 key 的人。您可以定义需要发送 token 的路由，通常类似于“/api/*”。

如果 token 正确，那么它会发送客户端期望的响应，如果不正确，它会告诉客户端重定向到/login (使用 401 或您喜欢的任何其他方式)。

如果 token 已过期(在向服务器请求某些内容时)，您可以自动重新生成 key 或告诉客户端注销或告诉客户端向服务器请求新 key 或任何您认为最好的选择，您还可以有另一个 token “refresh_token”，仅用于重新创建“access_token”(这也是一个非常常见的解决方案)。

如果您需要，我可以详细说明。