刷新页面时保存状态 - ReactJS

Question

我有一个组件，每次我更改屏幕时，应用程序都会通过该组件。在这个组件中，我保存isLogged: true了状态，一个告诉我是否已登录的变量。当isLogged === true，我重定向到主屏幕，当isLogged === false，我重定向到登录。如果我登录，我会进入我的应用程序并刷新页面（f5 或 ctrl+r），失去 isLogged 状态并将我重定向到登录，因为 isLogged 现在不是 true。我想知道是否有任何方法可以保存 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}/>;

    }

}

Answer 1

对于这种需要状态持续很长时间而不是刷新的情况，我建议使用LocalStorage它，因为它可以在浏览器中持续存在而没有问题，以下是您可以使用它的方法：export class Layout extends Component {&nbsp; //definimos las variables necesarias&nbsp; state = { isLogged: false, usuarioLogado: any };&nbsp; //funcion donde establecemos los valores de las variables&nbsp; DoLogin = (logged, usuario) => {&nbsp; &nbsp; localStorage.setItem('isLogged', true);&nbsp; &nbsp; this.setState({ isLogged: localStorage.getItem('isLogged'), usuarioLogado: usuario});&nbsp; };&nbsp; &nbsp;render() {&nbsp; &nbsp;const { changeLanguage, children, headerTitle, labelData, textos, valor } = this.props;&nbsp; &nbsp;const { isLogged, usuarioLogado } = tihs.state;&nbsp; &nbsp; &nbsp;if (isLogged) {&nbsp; &nbsp; &nbsp; &nbsp;return <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<NavMenu headerTitle={headerTitle} textos={textos} valor={valor} changeLanguage={changeLanguage} usuario={usuarioLogado} labelData={labelData} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else return <SignIn callbackFromParent={this.DoLogin} labelData={labelData}/>;&nbsp; &nbsp; }}此外，如果您愿意，可以LocalStorage在 DevTools 的Application选项卡中LocalStorage(Chrome)下检查您的收藏。此变量可用于所有文件，使用与以前相同的调用。

Answer 2

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

Answer 3

您可以将其存储cookie并读取cookie并在 init 上设置值或者您可以将其存储在其中localStorage并从中读取或者您也可以将其存储在其中indexedDB并从中读取。localStorage&nbsp;可能是最简单的https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies&nbsp;https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage&nbsp;https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API实际的实现将在SignIn组件中，它检查和设置值。