React私有路由因认证状态未及时更新始终判定为false的解决咨询

这个问题的核心是认证请求是异步的，你的路由在组件挂载初期就已经开始判断authed状态了——此时isAuthenticated还是初始的false，自然会直接跳转到首页。我们需要添加一个「加载中」的状态，让私有路由在认证结果出来前先等待，不要立刻做权限判断。

步骤1：在App.js中添加加载状态 #

首先修改你的App组件状态，新增一个isLoading字段，初始值设为true，表示认证请求正在进行中：

constructor(props) {
  super(props);
  this.state = { 
    isAuthenticated: false,
    isLoading: true // 新增加载状态
  }
}

componentDidMount() {
  isAuthenticated().then((result) => {
    this.setState({ 
      isAuthenticated: result,
      isLoading: false // 请求完成后关闭加载状态
    });
  }).catch(() => {
    // 处理请求失败的情况，比如网络错误
    this.setState({
      isAuthenticated: false,
      isLoading: false
    });
  });
}

步骤2：修改PrivateRoute组件，处理加载状态 #

接下来调整你的私有路由组件，当isLoading为true时，不要立刻跳转或渲染页面，而是返回一个加载提示（比如加载动画、文字提示），直到认证结果确定：

import { Route, Redirect } from 'react-router-dom';
import React from 'react';

export default ({ component: Component, render: renderFn, authed, isLoading, ...rest }) => {
  // 加载中时，返回加载提示
  if (isLoading) {
    return <div>正在验证身份...</div>; // 你可以替换成自己的加载组件
  }

  if (Component) {
    return (
      <Route {...rest} render={props => 
        authed ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/', state: { from: props.location } }} />
        )
      } />
    );
  }

  if (renderFn) {
    return (
      <Route {...rest} render={props => 
        authed ? (
          renderFn(props)
        ) : (
          <Redirect to={{ pathname: '/', state: { from: props.location } }} />
        )
      } />
    );
  }

  return null;
};

步骤3：更新路由调用，传递isLoading状态 #

最后，在使用PrivateRoute的时候，把App的isLoading状态也传进去：

<PrivateRoute 
  authed={this.state.isAuthenticated} 
  isLoading={this.state.isLoading}
  path="/route1" 
  render={props => <iframe frameBorder={0} src={constans.urlRoute1} className="iframe" />} 
/>
<PrivateRoute 
  authed={this.state.isAuthenticated}
  isLoading={this.state.isLoading}
  path='/register' 
  component={RegisterPage} 
/>

额外优化建议 #

• 你可以把加载提示换成更友好的组件，比如自定义的Spinner加载动画。
• 考虑在认证请求失败时给出用户提示，比如弹窗告知「验证失败，请重试」。
• 务必给异步请求加上catch处理，避免组件一直卡在加载状态。

这样调整后，私有路由会先等待认证请求完成，再根据最终的authed状态决定是渲染受保护页面还是跳转到首页，就不会出现初始状态误判的问题了。

内容的提问来源于stack exchange，提问作者mouchin777