在 React 应用程序中处理 JWT 身份验证答案

【问题标题】：Handling JWT authentication in React app在 React 应用程序中处理 JWT 身份验证
【发布时间】：2017-09-06 13:52:20
【问题描述】：

我正在尝试使用 react-router v4 实现一个受限路由，我几乎完成了，但我需要处理 JWT 令牌的验证，不知道该放在哪里。

受限路线

const RestrictedRoute = (props) => {
  const { component, ...otherProps } = props;
  return <Route {...otherProps} component={component} />;
};

const mapStateToProps = state => ({
  authenticated: state.authentication.session,
});


const branched = branch(
  ({ authenticated }) => !authenticated,
  renderComponent(() => <Redirect to="/login" />),
);

const enhanced = compose(
  connect(mapStateToProps),
  branched,
)(RestrictedRoute);

export default enhanced;

因此，如果state.authentication.session 设置为false，我可以将用户重定向到/login 页面。到目前为止，我一直在检查是否有 jwt cookie 并基于此设置 session。这有一些简单的漏洞，因为您可以添加任何值的jwt cookie，您将被视为已通过身份验证。

我创建了一个端点来验证我的jwt 令牌并为此创建了一个操作。我的问题是 - 把这个放在哪里？

如果我把它放在RestrictedRoute 的componentWillMount 中，并且经过身份验证的用户尝试访问受限页面，他会看到login 页面，然后切换到受限路由，因为来自端点的响应会更改 redux商店。

【问题讨论】：

标签： reactjs jwt

【解决方案1】：

您想在每个 RestrictedRoute 中验证您的令牌吗？为什么？！

即使您的 react 路线受到限制，您也无需验证您的令牌即可更改路线。

您必须通过为该 API 编写策略或中间件来验证您的令牌以在服务器上获取数据。

使用这种方法，您只需检查 cookie 以在 react-route 中验证它。如果黑客将数据放在您的 cookie 上，他们可以访问该 react-route 但他们看不到数据

【讨论】：

感谢您的回答。我通过验证服务器上的令牌（就像我做服务器端渲染一样）并将数据传递到我的 redux 存储来处理它。