Javascript 刷新页面时保存状态-ReactJS

我有一个组件，每次我更改屏幕时应用程序都会通过该组件。在这个组件中，我将

isLogged:true

保存在state中，这个变量告诉我是否已登录。 当

isLogged===true

时，我重定向到主屏幕，当

isLogged===false

时，我重定向到登录。如果我登录，我会输入我的应用程序并刷新页面（f5或ctrl+r），失去isLogged状态并将我重定向到signIn，因为isLogged现在不是真的。 我想知道是否有任何方法可以保存isLogged变量，以便刷新页面（正在登录）时不会将我重定向回signIn。我曾试图在本地存储中保存状态，但我认为它不安全。这是我的代码：

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}/>;
    }
}

导出类布局扩展组件{
建造师（道具）{
超级（道具）；
//定义必要的变量
this.state={isLogged:false，usuarioLogado:any}；
//功能绑定的实现
this.DoLogin=this.DoLogin.bind（this）；
}
//变量的价值函数
多洛金=（已记录，通常情况下）=>
这是我的国家({
isLogged：已记录，
usuarioLogado:usuario
});
render（）{
if（this.state.isloged）{
返回
{this.props.children}
}
否则返回；
}
}

您可以将其存储在

cookie

中，从

cookie

中读取并在init上设置值

或者您可以将其存储在

localStorage

中并从中读取

或者您也可以将其存储在

indexedDB

中并从中读取

localStorage

可能是最简单的

---

实际实现将在

SignIn

组件中，该组件检查并设置值。

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

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

令牌

）：

• 如果存在，请将状态设置为

  isLoggedIn=true

• 如果不存在，请将状态设置为

  isLoggedIn=false

  ，然后导航到登录

---

在登录的情况下，您将在成功登录后将该令牌保存在本地存储中，并设置

isLoggedIn=true

，但您还需要从本地存储中删除该项，并在用户注销或任何服务器调用返回401时设置

isLoggedIn=false

（这稍微取决于您的后端实现）.

对于这种情况，如果您需要一个状态持续很久而不是刷新，我建议使用，因为它可以在浏览器中持续，没有问题，以下是您可以使用它的方法：

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}/>;
    }
}

导出类布局扩展组件{
//定义必要的变量
state={isLogged:false，usuarioLogado:any}；
//变量的价值函数
多洛金=（已记录，通常情况下）=>{
setItem（'isLogged'，true）；
this.setState（{isLogged:localStorage.getItem（'isLogged'），usuarioLogado:usuario}）；
};
render（）{
const{changeLanguage，children，headertile，labelData，textos，valor}=this.props；
const{isLogged，usuarioLogado}=tihs.state；
如果（已记录）{
返回
{儿童}
}
否则返回；
}
}

---

此外，如果您愿意，您可以在DevTools中的

应用程序
选项卡的
本地存储
（Chrome）下检查
本地存储
集合。使用与以前相同的调用，此变量将可用于您的所有文件。
您必须将身份验证数据存储在浏览器存储或cookie中

如果在用户身份验证后收到某种令牌（对于JWT），则可以将其存储在浏览器
localStorage
（在选项卡之间持久化）或
sessionStorage
（在当前选项卡内持久化）中。如果要提高安全性，应在一段时间不活动后使敏感信息无效或删除。好的做法是在短时间内使令牌失效（web服务在当前令牌过期之前向您发送新令牌，但在当前令牌过期之后，用户必须再次登录）。这样可以防止盗取令牌，例如，当用户忘记注销而离开并保持浏览器打开时。
您使用的是哪种身份验证？我使用基本身份验证，使用用户登录并通过@最好将其保存在cookie中-设置为localStorage或sessionStorage