Save state when refresh page - ReactJS

Question

I have a component that the application goes through every time I change the screen. In this component I save isLogged: true in the state, a variable that tells me if I have logged in. When isLogged === true, I redirected to the home screen, when isLogged === false, I redirected to the signIn. If I log in, I enter my application and refresh the page (f5 or ctrl+r), lose the isLogged state and redirect me to signIn, because isLogged isn't true now. I wanted to know if there is any way to save the isLogged variable, so that refreshing the page (being logged in) does not redirect me back to signIn. I have tried to save the state in local storage, but I see it unsafe. This is my code:

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

Best to save it in a cookie - npmjs.com/package/react-cookie — Harmenx

Alberto Perez Alberto Perez · Accepted Answer · 2019-10-08T09:24:20

For this kind of cases in which you need a state to last far from a refresh, I'll recommend using LocalStorage because it could last in the browser with no problem, here's how you can use it:

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

Also, if you want to, you could check your LocalStorage collection in DevTools, in the Application tab, under LocalStorage (Chrome). This variable would be available for all your files, using the same calls as before.

Save state when refresh page - ReactJS

4 Answers