刷新页面时保存状态 - ReactJS答案

【问题标题】：Save state when refresh page - ReactJS刷新页面时保存状态 - ReactJS
【发布时间】：2019-10-08 18:33:21
【问题描述】：

我有一个组件，每次更改屏幕时应用程序都会通过该组件。在这个组件中，我将isLogged: true 保存在状态中，这是一个告诉我是否已登录的变量。当isLogged === true时，我重定向到主屏幕，当isLogged === false时，我重定向到登录。如果我登录，我进入我的应用程序并刷新页面（f5 或 ctrl+r），失去 isLogged 状态并将我重定向到 signIn，因为 isLogged 现在不正确。我想知道是否有任何方法可以保存 isLogged 变量，以便刷新页面（正在登录）不会将我重定向回登录。我试图将状态保存在本地存储中，但我认为它不安全。这是我的代码：

export class Layout extends Component {

    constructor(props) {
        super(props);

        //definimos las variables necesarias
        this.state = { isLogged: false, usuarioLogado: any };

        //realizamos el bind de las funciones
        this.DoLogin = this.DoLogin.bind(this);
    }

    //funcion donde establecemos los valores de las variables
    DoLogin = (logged, usuario) =>
        this.setState({
            isLogged: logged,
            usuarioLogado: usuario
        });

    render() {
        if (this.state.isLogged) {
            return <div>
                <NavMenu headerTitle={this.props.headerTitle} textos={this.props.textos} valor={this.props.valor} changeLanguage={this.props.changeLanguage} usuario={this.state.usuarioLogado} labelData={this.props.labelData}/>
                {this.props.children}
            </div>
        }
        else return <SignIn callbackFromParent={this.DoLogin} labelData={this.props.labelData}/>;
    }
}

【问题讨论】：

您使用的是哪种身份验证？
我使用基本身份验证，使用用户登录并通过。 @zhuber
最好将其保存在 cookie 中 - npmjs.com/package/react-cookie
设置为 localStorage 或 sessionStorage

标签： javascript reactjs

【解决方案1】：

对于这种需要状态持续远离刷新的情况，我建议使用LocalStorage，因为它可以毫无问题地在浏览器中持续存在，以下是您的使用方法：

export class Layout extends Component {
  //definimos las variables necesarias
  state = { isLogged: false, usuarioLogado: any };

  //funcion donde establecemos los valores de las variables
  DoLogin = (logged, usuario) => {
    localStorage.setItem('isLogged', true);
    this.setState({ isLogged: localStorage.getItem('isLogged'), usuarioLogado: usuario});
  };

   render() {
   const { changeLanguage, children, headerTitle, labelData, textos, valor } = this.props;
   const { isLogged, usuarioLogado } = tihs.state;

     if (isLogged) {
       return <div>
         <NavMenu headerTitle={headerTitle} textos={textos} valor={valor} changeLanguage={changeLanguage} usuario={usuarioLogado} labelData={labelData} />
                {children}
            </div>
        }
        else return <SignIn callbackFromParent={this.DoLogin} labelData={labelData}/>;
    }
}

此外，如果您愿意，您可以在 DevTools 中的 Application 选项卡中的 LocalStorage (Chrome) 下检查您的 LocalStorage 集合。此变量可用于您的所有文件，使用与以前相同的调用。

【讨论】：

【解决方案2】：

您可以将其存储在 cookie 并从 cookie 读取并在 init 上设置值

或者您可以将其存储在 localStorage 并从中读取

或者您也可以将其存储在indexedDB 中并从中读取。

localStorage 可能是最简单的

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

实际的实现将在SignIn 组件中，它检查并设置值。

【讨论】：

【解决方案3】：

您可以将其保存在本地存储中。基本上这就是流程

一旦用户最初进入您的站点（这包括刷新）检查本地存储指定项目（例如token）：

如果存在，请将您的状态设置为isLoggedIn = true
如果不存在设置状态为isLoggedIn = false 并导航到登录

如果登录成功，您将在成功登录后将该令牌保存在本地存储中并设置isLoggedIn = true，但您还需要从本地存储中删除该项目并在用户注销时设置isLoggedIn = false 或任何服务器调用都会返回 401（这稍微取决于您的后端实现）。

【讨论】：

【解决方案4】：

您必须将身份验证数据存储在浏览器存储或 cookie 中。

如果您在用户身份验证后收到某种令牌（在 JWT 的情况下），您可以将其存储在浏览器 localStorage（在选项卡之间）或sessionStorage（在当前选项卡内）。如果您想提高安全性，您应该在一段时间不活动后使敏感信息失效或删除。好的做法是在短时间内使令牌失效（Web 服务在当前令牌过期之前向您发送新令牌，但在它过期后，用户必须再次登录）。这种方式可以防止窃取令牌，例如，当用户忘记注销并离开并保持浏览器打开时。

【讨论】：