Question

我尝试使用react-router v4来实施限制路线，而且我差不多完成了，但我需要处理JWT令牌的验证，并且不知道在哪里放置它。

RestrictedRoute

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;

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

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

如果我将其放在componentWillMount的{{1}}中且经过身份验证的用户尝试访问受限制的页面，则会显示RestrictedRoute页面，然后切换到受限制的路由，作为响应从端点更改redux存储。

Answer 1

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

即使您的react -route受到限制，您也不需要验证令牌以更改路线。

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

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

在React app中处理JWT身份验证

1 个答案: