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

将状态反映到sessionStorage：

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

请注意，sessionStorage中的数据始终是字符串，并且任何非字符串（例如布尔值）的数据都将转换为字符串，因此您应该：

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

如何维护isAuth和保护私有路由？

1 个答案: