反应-渲染APP前检查身份验证

时间:2020-04-03 09:35:07

标签: reactjs

我真的被困在这里,不知道为什么,我是React的新手,所以我能得到的每一个帮助都会被认为是很棒的:D!

当USER登录时,我已经在本地存储中存储了一个JWT令牌,当我们刷新页面时,我具有此功能来检查用户是否已通过身份验证,因此我们可以再次设置用户。

async checkLoginStatus() {
    console.log('checking');
    const token = localStorage.getItem('sid');
    if (token) {
      let user = await VerifyUser(token);
      if (user) {
        this.setState({
          isLoggedin: true,
          user: user
        });
      } else {
        this.setState({
          isLoggedin: false,
          user: {}
        });
      }
    } else {
      this.setState({
        isLoggedin: false,
        user: {}
      });
    }
  }

  componentDidMount() {
    this.checkLoginStatus();
  }

这是我的自动取款机,不用管代码的差异,测试一些东西

<Router>
            <Header handleLogin={this.handleLogin} isLoggedin={this.state.isLoggedin} handleLogout={this.handleLogout} />
            <Switch>
              <Route exact path="/about" component={About} />
              <Route exact path="/portfolio" component={Portfolio} />
              <Route exact path="/" component={ () => <Home user={this.state.user}/> } />
              <PrivateRoute exact path="/user" isLoggedIn={this.state.isLoggedin} component={User} />
            </Switch>
        </Router>

这是我的私人路线

const PrivateRoute = ({ component: Comp, isLoggedIn, path, ...rest }) => {
    return (
      <Route path={path} {...rest} render={props => {
          return isLoggedIn ? (<Comp {...props} />) : (<Redirect to="/" />);
        }}
      />
    );
  };

export default PrivateRoute;

当用户登录后,他们可以访问“受保护”页面,但是在登录后,他们不能。这样就可以了。当我刷新网站上任何地方的页面时,它都会检查我们是否有令牌并登录用户,这也不是问题。

问题是当我站在/ user <-受保护的页面上,并且刷新页面时,该用户尚未登录,我想这是因为我们检查用户要登录的功能尚未完成当我们尝试渲染该路线时。香港专业教育学院试图将componentDidMount更改为componentWillMount,没有结果。

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

问题在于isLoggedIn的初始值为false,这会触发重定向(在异步更新状态之前):

isLoggedIn ? (<Comp {...props} />) : (<Redirect to="/" />)

您需要的是“正在加载”,“登录成功”和“登录失败”的3种状态。

带有2个布尔变量的示例:

state = {
  isLoading: true,
  isLoggedIn: false,
  user: {}
}
...
    this.setState({
      isLoading: false,
      isLoggedIn: false
    })
...
    isLoggedIn ? (<Comp {...props} />) : (isLoading ? 'Loading...' : <Redirect to="/" />)

(如果您希望使用较少的变量,则可以在初始状态isLoggedIn: null和条件isLoggedIn === null下实现)