Question

每次用户登录时，即使页面重新加载，我也希望状态保持为“true”。最初将状态设置为false（让_authed = false）。但是当我重新加载页面时，它会返回false，这是索引页面。

我做了什么 当用户登录时，我将用户的详细信息保存在localStorage中，当用户注销时，我清除了localStorage并将其设置为false。（这很好）

在setAuthed（）函数中，我试图检查我在localStorage中存储的用户是否为null，它应该将authed变量保持为true。

但是当我刷新页面时它不起作用。有什么事，我做错了吗？帮助赞赏。

let _authed = false;

// User logs in, set user in localStorage
saveUser(user){
  _user = user;
  localStorage.setItem('user', JSON.stringify(user))
},

//User clicks logout, set state to false 
setLogout(){
  _authed = false;
  localStorage.clear()
},

 // If there is a user in local storage, always set state to true
setAuthed(){
     if (localStorage.getItem("user") !== null) {
      _authed = true;
      }
},


getAuthed(){
  return _authed;
},

Answer 1

您可以使用React lifecycle方法来读取和写入某种持久状态。在这里，我写了一个很小的例子来展示它。

class Root extends React.Component {
  state = {
    isLoggedIn: false
  }
  
  componentDidMount () {
    const persisState = localStorage.get('rootState');
    
    if (persistState) {
      try {
        this.setState(JSON.parse(pesistState));
      } catch (e) {
        // is not json
      }
    }
  }
  
  componentWillUnmount () {
    localStorage.set('rootState', JSON.stringify(this.state);
  }

  render () {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如何在React

1 个答案: