Ionic+React项目如何基于认证上下文实现路由守卫与重定向

核心实现逻辑 #

基于现有IonReactRouter、IonRouterOutlet的路由体系，可直接复用React生态的受保护路由封装模式，结合AuthContext中维护的loggedIn状态完成登录校验与重定向。

落地步骤 #

• 补充AuthContext的加载中间态
  在AuthContext中新增isAuthLoading状态，用于标记本地存储/登录状态接口的校验过程，避免初始渲染时loggedIn默认值为false触发错误重定向。认证逻辑完成后将该状态置为false即可。
• 封装通用路由校验组件
  针对所有需要登录权限才能访问的页面路径（/dashboard/:name、/dashboard/Edit/:id、/create），封装统一的校验组件：

  // ProtectedRoute.tsx
  import { Navigate, useLocation } from 'react-router-dom';
  import { useAuth } from './AuthContext';
  import { IonLoading } from '@ionic/react';
  
  export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
    const { loggedIn, isAuthLoading } = useAuth();
    const currentLocation = useLocation();
  
    // 认证状态加载中时展示全局加载态，阻断路由渲染
    if (isAuthLoading) {
      return <IonLoading isOpen={true} message="状态校验中" />
    }
  
    // 未登录时执行重定向，根据需求跳首页"/"，若需跳登录页可替换to的路径值
    if (!loggedIn) {
      return <Navigate to="/" state={{ from: currentLocation }} replace />;
    }
  
    // 校验通过则正常渲染目标页面
    return children;
  }
  

• 改造原有路由配置
  把需要认证的路由用上述封装的校验组件包裹，和原有公开路由做区分：

  <IonRouterOutlet>
    {/* 公开路由，无需登录即可访问 */}
    <Route exact path="/" component={HomePage} />
    <Route exact path="/signup" component={SignupPage} />
  
    {/* 受保护路由，需经过登录校验 */}
    <Route 
      path="/dashboard/:name" 
      element={
        <ProtectedRoute>
          <DashboardPage />
        </ProtectedRoute>
      } 
    />
    <Route 
      path="/dashboard/Edit/:id" 
      element={
        <ProtectedRoute>
          <EditDashboardPage />
        </ProtectedRoute>
      } 
    />
    <Route 
      path="/create" 
      element={
        <ProtectedRoute>
          <CreatePage />
        </ProtectedRoute>
      } 
    />
  </IonRouterOutlet>
  

注意事项 #

• 避免闪屏重定向：一定要等待认证状态的异步校验完全结束后再执行路由判断，否则会出现页面先渲染受保护页面再跳回首页的闪烁问题。
• 保留用户原访问路径：通过Navigate的state参数记录用户跳转前的目标路径，登录完成后可直接回到用户想访问的页面，无需重复操作。
• 无需在Ionic的页面生命周期钩子中重复写拦截逻辑，所有校验逻辑在路由进入前完成即可，不会和IonRouterOutlet的页面栈逻辑冲突。

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