检查身份验证令牌在 SPA 中是否有效的好方法答案

【问题标题】：A good way to check if auth token is valid in a SPA检查身份验证令牌在 SPA 中是否有效的好方法
【发布时间】：2018-10-04 11:36:56
【问题描述】：

所以我们在我们的 React SPA 中使用了令牌验证。保存在 cookie 中的令牌如下所示：

access_token: "BIG-LONG-ASS_TOKEN"
expires_in: 1538663229368
token_type: "Bearer"

在硬重新加载页面时令牌正确过期，但是当用户在客户端中保持活跃几天并浏览其他页面/请求时，我希望能够在令牌过期时注销用户。大家平时是怎么解决的呢？我想我可以做一个与我的“expires_in”匹配的预定函数，它在计时器结束时执行注销 redux 操作，或者在每条路线上检查它。

欢迎所有提示！

编辑：在每条路线上都这样做也不会那么好，因为可以在同一条路线上调用一些 api 调用。基本上，我希望能够从我返回的 401/403 中发送注销但集中，所以我不必在我得到的每个 authed 操作中捕获它。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

当您使用过期令牌访问 API 时，它可能会返回 HTTP 状态 401 或 403 响应，您可以在客户端检查这些响应并进行必要的状态更改。

当用户在一段时间不活动后尝试在 UI 中执行操作时，仅使用上述方法可能会惹恼用户，只是被引导到登录屏幕。为了解决这个问题，您可以在检测到用户存在并要求用户在他们有机会执行任何操作之前登录时调用一些服务器端点（现有的东西或仅用于令牌验证的特殊端点）。

【讨论】：

我考虑过将它基于 401 或 403，但问题是我希望这个逻辑集中，而不是在每 100 个经过身份验证的请求上重复。最好的事情是，如果我能做到，认为我的 api 函数但 dispatch 没有在那里定义，所以我不确定把它放在哪里，所以我不需要在所有 redux 操作中定义它
我同意无效令牌检测应该在所有 API 请求通用的代码路径中，但不能推荐任何关于 Redux 细节的东西，也许其他人可以介入。跨度>

【解决方案2】：

您可以创建一个单独的组件来对用户进行身份验证，如下所示：

const AuthenticatedRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => {
      return isValid ? <Component {...props} /> : <Redirect to={{ pathname: '/sign_out' }} />
  }} />
);

const ConnectedAuthenticatedRoute = withRouter(AuthenticatedRoute);
export default ConnectedAuthenticatedRoute;

在路线中你可以做这样的事情：

<AuthenticatedRoute exact path="/home" component={Dashboard} />

【讨论】：

问题是我仍然希望它们保持在同一页面上但清除用户状态（这只是隐藏了一些 UI）并使登录再次显示。
然后用一些额外的 prop 渲染组件，而不是 "" 渲染组件 "" 然后在你的组件中检查 id 它的有效/无效构造函数（props）{ super(props); if(props.invalid){ // 无效的用户设置状态为空 } }