基于Redux的React项目：LocalStorage无Token时无法自动重定向登录页问题排查

核心问题根因 #

• 路由配置结构不符合React Router的规范：原代码将<App>组件直接嵌入<Switch>内部，没有通过<Route>包裹，导致Switch的路由匹配逻辑完全失效，受保护页面的路由渲染流程被打断。
• Token校验逻辑位置完全错误：原代码的Token判断逻辑写在JSX的嵌套语法块内部，没有任何执行时机；既没有定义token变量的取值来源，代码里的store.dispatch(login)写法存在本质错误——仅传入了login action的函数引用，没有执行调用，完全不会触发登录流程。
• Token存取逻辑不一致：login action接口返回的解构逻辑取顶层token字段，但存储LocalStorage时读取的是user.token字段，一旦接口返回结构和预期不符，就会存入undefined值，导致后续Token校验永远失败。
• 无路由级权限拦截逻辑：仅靠Redux存储isAuthenticated状态，没有把状态和路由跳转做联动，哪怕未授权状态已经存在，也不会触发任何重定向动作。
• authReducer状态逻辑漏洞：所有Request分支直接返回全新state，没有扩展原有字段，导致请求过程中原有状态被意外清空；登出分支没有重置token、roles字段，登出后会残留旧的权限信息。
• authReducer字段类型不匹配：LOGIN_SUCCESS分支将user字段赋值为用户名字符串，但初始化状态中user定义为对象类型，后续读取用户信息时会出现类型不匹配的运行时错误。

分步修复方案 #

1. 统一Token存取逻辑
   修正authActions中LocalStorage的取值，保证和解构的接口返回字段一致：

   // 原错误代码
   localStorage.setItem('token', user.token);
   // 修正为
   const { token, user, roles } = response.data;
   localStorage.setItem('token', token);
   localStorage.setItem('user', JSON.stringify(user.username));
   localStorage.setItem('roles', JSON.stringify(roles));
   

2. 补全authReducer的状态逻辑
   • 所有请求分支保留原有state字段，避免状态丢失：

   case authConstants.LOGIN_REQUEST:
   case authConstants.LOAD_USER_REQUEST:
       return {
           ...state,
           loading: true,
           isAuthenticated: false,
       }
   

   • 登出分支重置全部权限相关字段：

   case authConstants.LOGOUT_SUCCESS:
       return {
           ...state,
           loading: false,
           isAuthenticated: false,
           user: null,
           token: null,
           roles: {},
       }
   

   • 补充CLEAR_ERRORS对应的常量导入，避免运行时出现未定义错误。
3. 实现路由级权限拦截组件
   封装PrivateRoute组件，从Redux读取权限状态，加载完成后判断授权状态，未授权直接重定向到登录页：

   import { Route, Redirect } from 'react-router-dom';
   import { connect } from 'react-redux';
   
   const PrivateRoute = ({ component: Component, isAuthenticated, loading, ...rest }) => {
       return (
           <Route 
               {...rest} 
               render={(props) => {
                   // 全局状态加载完成前不渲染页面，避免路由闪烁
                   if (loading) return null;
                   // 未授权状态直接跳转登录页
                   if (!isAuthenticated) return <Redirect to="/login" />
                   // 授权状态正常渲染业务页面
                   return <Component {...props} />
               }} 
           />
       )
   }
   
   const mapStateToProps = (state) => ({
       isAuthenticated: state.auth.isAuthenticated,
       loading: state.auth.loading
   })
   
   export default connect(mapStateToProps)(PrivateRoute);
   

4. 修正根路由配置
   替换原有的错误路由嵌套结构，用PrivateRoute包裹所有需要授权的业务路由，同时在应用初始化阶段补全Token校验逻辑：

   class Root extends Component {
       componentDidMount() {
           // 应用启动时读取本地存储的Token，触发用户信息加载流程
           const localToken = localStorage.getItem('token');
           if (localToken) {
               // 触发已实现的LOAD_USER_REQUEST动作，同步全局权限状态
               store.dispatch({ type: authConstants.LOAD_USER_REQUEST });
           }
       }
       render() {
           return (
               <Provider store={store}>
                   <BrowserRouter basename={'/'}>
                       <ScrollContext>
                           <Switch>
                               <Route path='/login' component={Login} />
                               {/* 所有受保护的业务路由统一用PrivateRoute包裹 */}
                               <PrivateRoute exact path='/' component={Dashboard} />
                           </Switch>
                       </ScrollContext>
                   </BrowserRouter>
               </Provider>
           )
       }
   }
   

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