重定向以验证失败登录

Question

我正在使用React上下文保持应用程序状态，使用JWT进行身份验证，使用React Router进行路由。

JWT的有效期为30分钟。 每次用户访问一条路线时，我都会检查是否过期，因此，如果令牌在到达下一条路线之前已过期，您将被重定向到登录名。 这可以正常工作，但是如果用户在某个页面上并且令牌已过期，并且他们在页面上进行API调用，他们将如何知道问题出在哪里？我可以在每个api调用的响应中并基于正在使用这些API调用的组件中的setState来处理401/403。但是我想做到这一点，而无需每个组件都尝试捕获401/403并设置状态。

我打算编写一个axios拦截器，以将Auth Header添加到出站请求中，并检查API响应中的AUTH错误。因此，我有一个拦截器，用于检查响应是401还是403。

此拦截器位于React代码之外，这意味着它无法直接呈现任何组件，也无法使用React Router将用户重定向到Login。

我看过类似的问题，它们确实提供了一些解决方法，但它们似乎都不是万无一失或做这件事的好方法。

React Router + Axios interceptors. How to Do a redirect?

How to redirect from axios interceptor with react Router V4?

1. 建议之一是在根组件中设置axios拦截器，以便在401/403发生时可以设置某些状态。我在可用性方面很喜欢，但在代码组织方面却不喜欢。
2. 使用Redux的人可以访问React之外的商店，并使用该商店来分派一个操作，使用户登录页面。使用React Context进行状态管理时，我认为这是不可能的。
3. 其他建议涉及使用window.location.href或history.push，两者似乎都可以以某种方式起作用，但是在登录后无法将用户重定向到同一页面。

我正在尝试构建一个与React Router如何与App无缝协作的解决方案，例如React Router记住了发件人的位置，我可以使用它在登录后将用户重定向到上一页，但是如果我使用window .location.href =“ /”或history.push（'/'），然后将用户发送到首页，从那里将他们重定向到登录页面，但是现在上一页是首页，而不是错误发生。我似乎没有办法像React Router一样跟踪先前的位置。