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）是否足以检查令牌是否存储在本地以让应用程序呈现组件？

b）如果令牌过期怎么办？如何避免加载新组件？

c）我是否应该在PrivateRoute开头调用服务器以检查令牌过期和有效期？这将在每次路由更改时为服务器添加另一个往返。

d）在不触及服务器的情况下验证令牌的正确方法是什么？

Answer 1

我不使用反应，但我对JWT代币有一些经验。

恕我直言，客户端不应该随时访问令牌。应该存储在cookie上，并在每次调用时发送到服务器，该服务器应该是唯一一个具有密钥的服务器并访问其内容。您可以定义需要发送令牌的路由，通常类似于“/ api / *”。

如果令牌是正确的，那么它会发送客户端期望的响应，如果没有，它会告诉客户端重定向到/ login（使用401或您喜欢的任何其他方式）。

如果令牌过期（向服务器请求内容），您可以自动重新生成密钥或告诉客户端注销或告诉客户端要求服务器提供新密钥或您认为最佳选择的任何内容，还可以使用另一个标记'refresh_token'来仅用于重新创建'access_token'（这也是一种非常常见的解决方案）。

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

Answer 2

默认情况下，JWT可以存储数据，您可以对其进行解码，检查是否已过期，或者服务器保存在那里的任何其他字段。

重要的是在每次API调用时将其发送到服务器，以验证签名＆amp;用它的数据。

所以，我的建议是路由足以只验证客户端，黑客只能通过修改JWT绕过它，所以因为你的私有路由的每个API调用都应该通过JWT服务器端验证，到检查签名。

如何在反应路由器V4上正确实现JWT认证路由

2 个答案: