createBrowserRouter 将 props 传递给父组件以验证权限

Question

我要做的事情也许没用。如果社区有其他解决方案请提供给我

我正在做的是我需要检查每个路由是否用户有权访问它。所以我要做的是，如果用户无权访问路线/页面 a-lication 重定向到仪表板

用户权限定义为数字，您可以在下面的代码中看到

element: <Register requiredPermissions={[2, 3]} />

完整代码

// import AuthRequired from "@/AuthRequired"
import Dashboard from "@/pages/Admin/Dashboard/Dashboard";
import Login from "@/pages/Admin/Login/Login";
import Home from "@/pages/Home/Home";

import { createBrowserRouter } from "react-router-dom";
import AuthRequired from "./AuthRequired";
import Register from "@/pages/Admin/Register/Register";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/admin/login",
    element: <Login />,
  },
  {
    element: <AuthRequired requiredPermissions={[]} />,
    children: [
      {
        path: "admin/dashboard",
        element: <Dashboard />,
      },
      {
        path: "admin/dashboard/register",
        element: <Register requiredPermissions={[2, 3]} />,
      },
    ],
  },
]);

我需要的是我需要一些如何将[2,3]的道具传递给AuthRequired.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { store } from "@/store/store";

interface RequiredPermissionsProps {
  requiredPermissions?: number[]; // Optional array of required permissions
}

function AuthRequired({ requiredPermissions = [] }: RequiredPermissionsProps) {
  const _location = useLocation();

  const {
    auth: { token, user, permissions },
  } = store.getState();

  console.log("requiredPermissions ->", requiredPermissions);

  return (
    <>
      {token && user && permissions && permissions !== "" ? (
        <Outlet />
      ) : (
        <Navigate to="/admin/login" state={{ from: _location }} replace />
      )}
    </>
  );
}

export default AuthRequired;

因此在 AuthRequired.tsx 中我可以检查条件和输出或重定向

您有任何解决方案可以做到这一点吗？或者我还有其他方法吗

Answer 1

假设您需要将

state.auth.permissions

与传递的

requiredPermissions

属性进行比较，我建议对

AuthRequired

进行以下重构。

function AuthRequired({ requiredPermissions = [] }: RequiredPermissionsProps) {
  const location = useLocation();

  const { token, user, permissions } = useSelector(state => state.auth);

  console.log({ requiredPermissions });

  const hasPermission = requiredPermissions.length
    ? requiredPermissions.every(
      permission => permissions.includes(permission)
    ) : true;

  const hasAccess = token && user && hasPermission;

  return hasAccess
    ? <Outlet />
    : <Navigate to="/admin/login" state={{ from: location }} replace />;
}

重新组织并包装您想要通过权限/角色保护的路由。

示例：

export const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  {
    path: "admin",
    children: [
      { path: "login", element: <Login /> },
      {
        path: "dashboard",
        children: [
          { index: true, element: <Dashboard /> },
          ... any other unprotected admin dashboard routes
          {
            element: <AuthRequired requiredPermissions={[2, 3]} />,
            children: [
              { path: "register", element: <Register /> },
              ... any other protected admin dashboard routes
            ],
          },
        ],
      },
    ],
  },
]);