Question

我有一个组件，每次更改屏幕时，应用程序都会经历一次。在此组件中，我将isLogged: true保存为状态，该变量会告诉我是否已登录。当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}/>;
    }
}

Answer 1

您可以将其存储在dbo.Customer(CustomerID,Name) VALUES (1,Customer 1), (2,Customer 2) dbo.Location(LocationID, CustomerID, Name) VALUES (1,1,Location 1), (2,2,Location 2) dbo.CustomerDivision(CustomerDivisionID, CustomerID, Name) VALUES (1,1,Customer 1 Division 1), (2,1,Customer 1 Division 2) dbo.LocationDivisionID(LocationDivisionID, LocationID, CustomerDivisionID) VALUES (1,1,1), (2,2,1) <---- This should fail as the this CustomerDivision.CustomerID <> Location.CustomerID中并从cookie中读取并在init上设置值

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

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

indexedDB可能是最简单的

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

实际实现将在localStorage组件中，该组件将检查并设置值。

Answer 2

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

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

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

在登录的情况下，您将在成功登录后将该令牌保存在本地存储中并设置isLoggedIn = true，但是您还需要从本地存储中删除该项目并在出现以下情况时设置isLoggedIn = false用户注销或任何服务器调用返回401（这在某种程度上取决于您的后端实现）。

Answer 3

在这种情况下，您需要一个状态持续很长时间才能刷新，因此我建议使用LocalStorage，因为它可以在浏览器中持续存在而没有问题，这是您可以使用的方式：< / p>

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中LocalStorage标签的Application（Chrome）下检查LocalStorage集合。使用与以前相同的调用，此变量将可用于所有文件。

Answer 4

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

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

刷新页面时保存状态-ReactJS

4 个答案: