如何通过SessionProvider让所有Dashboard页面完成isAdmin校验（无_app.tsx）

因为没有_app.tsx，你可以通过创建通用布局组件或者React Context两种方式，在顶层统一获取管理员状态并传递给所有dashboard相关路由组件。

方法一：使用布局组件传递props #

1. 创建Dashboard布局组件 #

在布局中调用useAdminStatus获取管理员状态，计算出isAdmin后，将其传递给子组件：

import { useAdminStatus } from './path-to-your-hook';
import { ReactNode, cloneElement } from 'react';

type DashboardLayoutProps = {
  children: ReactNode;
};

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  const { data, isLoading, error } = useAdminStatus();
  // 根据接口返回结构计算isAdmin，这里假设接口返回{ isAdmin: boolean }
  const isAdmin = data?.isAdmin ?? false;

  // 处理加载状态
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 处理错误状态
  if (error) {
    return <div>获取权限状态失败，请稍后重试</div>;
  }

  // 将isAdmin作为props传递给子组件
  if (typeof children === 'object' && children !== null && 'type' in children) {
    return cloneElement(children, { isAdmin });
  }

  return children;
}

2. 在路由中使用布局包裹组件 #

不管你用的是Next.js Page Router还是React Router，将所有dashboard路由组件用这个布局包裹：

示例（React Router）：

import { Routes, Route } from 'react-router-dom';
import DashboardLayout from './DashboardLayout';
import Dashboard from './pages/Dashboard';
import Support from './pages/Support';
import Admin from './pages/Admin';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout><Dashboard /></DashboardLayout>} />
      <Route path="/dashboard/support" element={<DashboardLayout><Support /></DashboardLayout>} />
      <Route path="/dashboard/admin" element={<DashboardLayout><Admin /></DashboardLayout>} />
    </Routes>
  );
}

3. 在子组件中接收并使用isAdmin #

比如管理员页面的权限控制：

type AdminPageProps = {
  isAdmin: boolean;
};

export default function AdminPage({ isAdmin }: AdminPageProps) {
  // 非管理员直接拦截
  if (!isAdmin) {
    return <div>您没有权限访问此页面</div>;
    // 也可以做路由重定向，比如用useRouter（Next.js）或useNavigate（React Router）
  }

  return (
    <div>
      <h1>管理员专属页面</h1>
      {/* 管理员权限内容 */}
    </div>
  );
}

方法二：使用React Context全局传递 #

如果需要在更多组件中访问isAdmin，用Context会更灵活，避免逐层传递props：

1. 创建Admin Context #

import { createContext, useContext, ReactNode } from 'react';
import { useAdminStatus } from './path-to-your-hook';

type AdminContextType = {
  isAdmin: boolean;
  isLoading: boolean;
  error: Error | undefined;
};

const AdminContext = createContext<AdminContextType | undefined>(undefined);

// 全局Provider组件
export function AdminProvider({ children }: { children: ReactNode }) {
  const { data, isLoading, error } = useAdminStatus();
  const isAdmin = data?.isAdmin ?? false;

  return (
    <AdminContext.Provider value={{ isAdmin, isLoading, error }}>
      {children}
    </AdminContext.Provider>
  );
}

// 自定义钩子，方便组件调用
export function useAdmin() {
  const context = useContext(AdminContext);
  if (!context) {
    throw new Error('useAdmin必须在AdminProvider内部使用');
  }
  return context;
}

2. 在路由顶层包裹Provider #

将所有dashboard路由放在AdminProvider内：

import { Routes, Route } from 'react-router-dom';
import { AdminProvider } from './AdminContext';
import Dashboard from './pages/Dashboard';
import Support from './pages/Support';
import Admin from './pages/Admin';

function AppRoutes() {
  return (
    <AdminProvider>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/dashboard/support" element={<Support />} />
        <Route path="/dashboard/admin" element={<Admin />} />
      </Routes>
    </AdminProvider>
  );
}

3. 在组件中使用useAdmin钩子 #

import { useAdmin } from './AdminContext';

export default function AdminPage() {
  const { isAdmin, isLoading, error } = useAdmin();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>权限状态加载失败</div>;
  if (!isAdmin) return <div>无权限访问</div>;

  return <h1>管理员页面</h1>;
}

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