首页猿问刷新页面时保存状态 - ReactJS

刷新页面时保存状态 - ReactJS

JavaScript

不负相思意 2021-11-12 17:07:42

我有一个组件，每次我更改屏幕时，应用程序都会通过该组件。在这个组件中，我保存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}/>; }}

查看完整描述

3 回答

米脂

TA贡献1836条经验获得超3个赞

对于这种需要状态持续很长时间而不是刷新的情况，我建议使用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>

{children}

</div>

}

else return <SignIn callbackFromParent={this.DoLogin} labelData={labelData}/>;

}

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

反对回复 2021-11-12

料青山看我应如是

TA贡献1772条经验获得超8个赞

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

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

反对回复 2021-11-12