javascript - 如何维护isAuth并保护私有(private)路由？

Question

我正在尝试使用 React 中的 Github oAuth API 来实现身份验证，我正在使用 React.CreateContext() 来管理我的 AuthContext。

AuthContext.js

class AuthProvider extends React.Component {
  constructor(props) {
      super(props);
      if(typeof(sessionStorage.getItem('isAuth')) === 'undefined') {
        sessionStorage.setItem('isAuth',false);
      } 
      this.state = { isAuth: sessionStorage.getItem('isAuth') };
      this.login = this.login.bind(this)
      this.logout = this.logout.bind(this)
  }  

  login() {
   this.setState({isAuth: true});
  }

  logout() {
    this.setState({isAuth: false});
  }

当用户点击登录按钮时，登录方法被触发，isAuth被设置为true，并且用户被重定向到github登录页面，但是一旦用户返回到我的应用程序，该组件就会重新初始化，并且 isAuth 设置为 false。

我该如何处理这个问题？

Answer 1

将状态反射(reflect)到sessionStorage:

// AuthProvider
componentDidUpdate(prevProps, prevState, snapshot) {
  if(prevState.isAuth !== this.state.isAuth)
    sessionStorage.setItem('isAuth', this.state.isAuth);
}

请注意，sessionStorage 中的数据始终是字符串，任何不是字符串的内容(例如 bool 值)都将转换为字符串，因此您应该:

this.state = { isAuth: sessionStorage.getItem('isAuth') === "true" };