React - 从 API 获得 401 响应后保留表单信息

Question

我作为初级开发人员正在开发一个 React 应用程序

当用户发送表单并且 API 发回 401 令牌过期时，我希望他被重定向到登录页面（没关系），但我希望他在使用他拥有的数据再次登录后转到表单页面之前填写以重定向到登录页面

我有一个拦截器，当 API 返回 401 代码时将用户注销，它触发我的身份验证服务注销方法，然后我的私有路由重定向到登录页面：

if (!isLoggedIn) {
  // not logged in so redirect to login page with the return url
  return (
    <Redirect to={{ pathname: "/", state: { from: props.location } }} />
  );
} 

我想在用户重新登录时将其重定向到 props.location 并保留他的数据

大家知道有什么办法吗？

非常感谢你的帮助

Answer 1

401 - 未授权。

在注销用户和管理路由的情况下，您拥有路由器+历史记录

在文档中：

go(n) - (function) 将历史堆栈中的指针移动 n 个条目

这是为goBack定义的组件 - 它在历史上出现了n(-1) 次。 您还可以在函数中定义逻辑

import React from 'react';
import { withRouter } from 'react-router-dom';
import ReturnIcon from '../../img/tech/return-white-icon.svg'

const GoBack = ({ history }) => <img src={ReturnIcon} onClick={() => history.goBack()} alt="Go back" />;

export default withRouter(GoBack);

记住 - 重定向到授权路由 - 需要事先验证也很重要。

---

您可以防止丢失您的令牌：

它也可能有一个有效期。 一旦过了此有效期，服务器将不再允许使用此令牌访问资源。 在这一步中，用户必须通过重新认证或使用一些额外的方法来获得一个新的访问令牌：刷新令牌。

有很多理论和理论

当您在后端站点上定义令牌时，可选参数之一是生命周期- 例如令牌可以在 4 小时内有效，然后禁用。

您需要阅读有关令牌（刷新、可访问性等）的信息。

一种可能性是在后端站点上创建刷新令牌 - 并从前端调用它

节点.js：

var refreshTokens = {} 
      var token = jwt.sign(user, SECRET, { expiresIn: 300 }) 
      var refreshToken = randtoken.uid(256) 
      refreshTokens[refreshToken] = username res.json({token: 'JWT ' + token, refreshToken: refreshToken})