React Router PrivateRoute中isAuthenticated刷新失效问题求助

你遇到的问题核心在于页面刷新时Redux的初始状态与异步验证流程的时序不匹配：

1. 你的auth reducer初始状态中isAuthenticated是false，isIdentifyingToken也是false。
2. 当刷新受保护页面时，App组件的componentDidMount会触发异步的getCurrentUser请求，但这个请求是异步的，需要时间完成。
3. 而App组件一开始因为isIdentifyingToken初始为false，会直接渲染路由。此时PrivateRoute拿到的isAuthenticated是初始的false，立刻触发重定向到根路由。
4. 等异步请求完成后，isAuthenticated确实会变成true，但页面已经被重定向走了，所以看不到效果。

而用localStorage.authToken能正常工作，是因为localStorage是同步读取的，刷新时能立刻拿到token值，不需要等待异步请求。

我们需要调整状态初始化和路由渲染的逻辑，确保在token验证完成前，不会让PrivateRoute做出错误的重定向判断。

1. 修正Reducer初始状态 #

当页面加载时，如果localStorage里有authToken，我们应该把isIdentifyingToken初始化为true，表示正在验证token：

const initialState = {
 isAuthInProgress: false,
 isAuthenticated: false,
 authError: null,
 user: {},
 // 初始时检测localStorage，有token就标记为正在验证
 isIdentifyingToken: !!localStorage.getItem("authToken"),
 token: localStorage.getItem("authToken") || "",
}

2. 完善AUTH_ERROR的状态更新 #

在AUTH_ERROR的reducer分支里，需要把isIdentifyingToken设为false，确保验证失败后也能正常渲染路由：

case "AUTH_ERROR":
 return {
  ...state,
  isAuthInProgress: false,
  authError: action.data.error,
  isAuthenticated: false,
  user: {},
  isIdentifyingToken: false, // 新增：标记验证完成
 }

3. 简化App组件的componentDidMount #

现在初始状态已经处理了isIdentifyingToken，不需要再手动dispatchTOKEN_VERIFICATION_STARTS：

componentDidMount() {
 const authToken = localStorage.getItem("authToken")
 if (authToken) {
  this.props.dispatch(getCurrentUser(authToken))
 }
}

可选：给PrivateRoute添加加载状态（优化体验） #

如果不想让用户在验证过程中看到空白页面，可以修改PrivateRoute，在isIdentifyingToken为true时显示加载组件：

const PrivateRoute = ({ component: Component, isAuthenticated, isIdentifyingToken, ...rest }) => {
 // 验证中时显示加载
 if (isIdentifyingToken) {
  return <div>Loading...</div> // 替换成你的加载组件
 }

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

const mapStateToProps = (state) => {
 return { 
  isAuthenticated: state.auth.isAuthenticated,
  isIdentifyingToken: state.auth.isIdentifyingToken // 新增：获取验证状态
 }
}

这样调整后，页面刷新时会先进入token验证状态，路由不会立刻渲染，等验证完成后（不管成功还是失败），PrivateRoute会根据最终的isAuthenticated值判断是否允许访问，就不会出现错误重定向的问题了。

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