Javascript 如何在react路由器V4上正确实现JWT认证路由

使用RR V4文档，这是

PrivateRoute

（或

AuthenticatedRoute

）的示例代码

我的疑问是：

a） 检查令牌是否存储在本地以让应用程序呈现组件就足够了吗

b） 如果令牌过期，如何避免加载新组件

c） 我是否应该在

PrivateRoute

开始时调用上的服务器以检查令牌过期和有效性？这将在每次路由更改时向服务器添加另一个往返

---

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

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

重要的部分是在每次API调用时将其发送到服务器，以验证签名和数据

---

因此，我的建议是，对于路由来说，只验证客户端就足够了，黑客可以通过修改JWT绕过这一点，因此，来自您的私有路由的每个API调用都应该通过JWT服务器端进行验证，以检查签名。

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

重要的部分是在每次API调用时将其发送到服务器，以验证签名和数据

---

因此，我的建议是，对于路由，只验证客户端就足够了，黑客可以通过修改JWT绕过这一点，因此，来自私有路由的每个API调用都应该通过JWT服务器端进行验证，以检查签名。

我不使用react，但我对JWT令牌有一些经验

IMHO客户端在任何时候都不应该访问令牌。Is应该存储在cookie上，并在每次调用时发送给服务器，服务器应该是唯一拥有密钥的服务器，可以对其进行解密并访问其内容。您可以定义需要发送令牌的路由，通常类似于“/api/*”

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

如果令牌过期（在向服务器请求某件事），您可以自动再生密钥或告诉客户端注销或告诉客户端请求服务器新密钥或任何您认为最好的选项，您还可以使用另一个令牌“刷新令牌”，仅用于重新创建“Access令牌”。（这也是一个非常常见的解决方案）

---

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

我不使用react，但我有一些使用JWT令牌的经验

IMHO客户端在任何时候都不应该有权访问令牌。Is应该存储在cookie中，并在每次调用时发送给服务器，服务器应该是唯一一个具有密钥的服务器，可以对其进行解密并访问其内容。您可以定义需要发送令牌的路由，通常类似于“/api/*”

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

如果令牌过期（在向服务器请求某件事），您可以自动再生密钥或告诉客户端注销或告诉客户端请求服务器新密钥或任何您认为最好的选项，您还可以使用另一个令牌“刷新令牌”，仅用于重新创建“Access令牌”。（这也是一个非常常见的解决方案）

---

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

我的观点是，使用ReactJs，并非所有路由都需要查询服务器。如果令牌过期，那么我可以移动到另一个路由并继续在应用程序中工作。否则，在每次请求时在服务器上验证令牌似乎太多了，无法实现更智能的操作…我所做的是想知道这个更聪明的方法是如何工作的…好吧。我知道你不想让用户在他们检查路由访问之前自由支配。我想说这足以迫使PrivateRoutes呼叫服务器。如果JWT令牌没有太多的信息，它是非常轻量级的，因此没有太多额外的费用要支付。如果路由不是私有的，哟除非你需要一些资源，否则不要调用。我的观点是，使用ReactJs，并不是所有路由都需要查询服务器。如果令牌过期，那么我可以移动到另一个路由并继续在应用程序中工作。否则，在每个请求上验证服务器上的令牌似乎太多了，无法实现更智能的操作…W我想知道的是，这种更聪明的方法是如何工作的……好吧。我知道你不想让用户在他们检查路由访问之前自由支配。我想说，这足以迫使PrivateRoutes呼叫服务器。如果JWT令牌没有太多信息，它非常轻量级，因此没有太多额外的费用要支付。如果路由不是Private、 除非您需要一些资源，否则您不会调用。与@Sandokan answer相同的注释…对于不到服务器获取数据的路由，什么是？ReactJS是客户端上的SPA…与@Sandokan answer相同的注释…对于不到服务器获取数据的路由，什么是？ReactJS是客户端上的SPA。。。

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>

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