React实现路由鉴权的实例详解

目录

前言
确定权限树
权限树处理
菜单权限控制
组件权限控制
路由权限控制
总结

export type LocalMenuType = {
  key: string;
  level: number; // 层级
  menucode: string; // 权限码 用于查询是否有此权限
  label?: React.ReactNode; // 菜单名称
  path?: string | string[]; // 路由
  parentmenuid?: string; // 父级菜单id
  children?: LocalMenuType[]; // 子菜单
};

export const getFlattenList = (
  authList: LocalMenuType[], // 需要打平的权限树
  flattenAuthList: LocalMenuType[], // 存储打平后的权限树
  level?: number // 打平层级
) => {
  authList.forEach((item) => {
    // 如果查找层级超出则返回
    if (level && item.level > level) return;
    flattenAuthList.push(Object.assign({}, item, { children: [] }));
    if (item.children && item.children.length > 0) {
      getFlattenList(item.children, flattenAuthList, level);
    }
  });
};

export enum RoleType {
  MANAGER,
  ONLY_ORDER,
  ONLY_VIEW_LIST,
}
export const setCurrentRole = (type: RoleType) => {
  switch (type) {
    case RoleType.MANAGER: {
      window.localStorage.setItem("menu", JSON.stringify(menus));
      break;
    }
    case RoleType.ONLY_ORDER: {
      window.localStorage.setItem("menu", JSON.stringify(onlyOrder));
      break;
    }
    case RoleType.ONLY_VIEW_LIST: {
      window.localStorage.setItem("menu", JSON.stringify(onlyViewList));
      break;
    }
  }
};
export const getCurrentRole = () =>
  JSON.parse(window.localStorage.getItem("menu")) as LocalMenuType[];

// 处理权限菜单
const handleAuthMenu = (
  menuList: LocalMenuType[],// 全部菜单权限树
  authCodes: string[], // 角色所有权限
  authMenuList: LocalMenuType[], // 角色最终拥有菜单列表
  level?: number // 处理层级
) => {
  menuList.forEach((menu) => {
    // 如果level 存在，则只处理小于level的情况
    if (level && menu.level > level) return;
    // 如果有权限，则继续递归遍历菜单
    if (authCodes.includes(menu.menucode)) {
      let newAuthMenu: LocalMenuType = { ...menu, children: undefined };
      let newAuthMenuChildren: LocalMenuType[] = [];
      if (menu.children && menu.children.length > 0) {
        handleAuthMenu(menu.children, authCodes, newAuthMenuChildren, level);
      }
      // 添加子菜单
      if (newAuthMenuChildren.length > 0) {
        newAuthMenu.children = newAuthMenuChildren;
      }
      authMenuList.push(newAuthMenu);
    }
  });
};
// 获取角色权限菜单
export const getAuthMenu = (flattenAuth: LocalMenuType[], level?: number) => {
  // 获取权限菜单的menucode
  const authCodes: string[] = flattenAuth.map((auth) => auth.menucode);
  let authMenu: LocalMenuType[] = [];
  handleAuthMenu(menus, authCodes, authMenu, level);
  return authMenu;
};

// anthRoles.ts
// 获取菜单路由
export const getRoutePath = (localMenu: LocalMenuType) => {
  return localMenu.path
    ? typeof localMenu.path === "object"
      ? localMenu.path[0]
      : localMenu.path
    : null;
};
// home.tsx
//2级菜单list
const secondAuthMenuList = useMemo(() => {
    return flattenList.filter((res) => res.level === 2);
  }, [flattenList]);
// 初始化菜单
  useEffect(() => {
    const initMenuItem = secondAuthMenuList[0];
    if (initMenuItem) {
      const initRoute =
        initMenuItem.level > 2 ? pathname : getRoutePath(initMenuItem)!;
      navigate(initRoute, { replace: true });
    }
  }, [secondAuthMenuList, flattenList]);

const findSecondMenuByKey = (key: string) =>
    secondAuthMenuList.find((item) => item.key === key);

    // 点击菜单进行跳转
 const handleMenuChange = ({ key }: { key: string }) => {
    setMenuSelectKeys([key]);
    let chooseItem = findSecondMenuByKey(key);
    if (chooseItem?.path) navigate(getRoutePath(chooseItem) || "");
  };

// 是否有当前权限
export const hasAuth = (meunCode: string) => {
  // 当前打平的角色权限树
  let flattenAuthList: LocalMenuType[] = getCurrentFlattenRole();
  return !!flattenAuthList.find((auth) => auth.menucode === meunCode);
};
AuthBuutonHOC.tsx
const AuthButton: React.FC<Props> = ({ menuCode, children }) => {
  // 没有当前权限则不显示
  if (!hasAuth(menuCode)) return null;
  return <>{children}</>;
};
export default React.memo(AuthButton);

// 是否有当前的路由权限
export const hasAuthByRoutePath = (path: string) => {
  let flattenAuthList: LocalMenuType[] = getCurrentFlattenRole();
  return !!flattenAuthList.find((auth) =>
    routePathMatch(path, auth.path || "")
  );
};
// 判断路由是否一致
export const routePathMatch = (path: string, menuPath: string | string[]) => {
  if (typeof menuPath === "object") {
    return menuPath.some((item) => matchPath(item, path));
  }
  return !!matchPath(menuPath, path);
};

useEffect(() => {
    // 获取当前匹配到的菜单
    const matchMenuItem = flattenList.find((item) =>
      routePathMatch(pathname, item.path || "")
    );
    if (matchMenuItem) {
      // 如果当前菜单level为3级或者更小则设置其父id，否则设置其id
      matchMenuItem.level > 2
        ? setMenuSelectKeys([matchMenuItem.parentmenuid!])
        : setMenuSelectKeys([matchMenuItem.key]);
      // 如果当前菜单level为3级或者更小则通过父id找到2级菜单
      const newSecondMenu =
        matchMenuItem.level > 2
          ? findSecondMenuByKey(matchMenuItem.parentmenuid!)
          : matchMenuItem;
      // 有对应的二级菜单则定位到当前侧边菜单栏位置
      if (newSecondMenu) {
        setMenuOpenKeys((preOpenKeys) => {
          const openKeysSet = new Set(preOpenKeys || []);
          openKeysSet.add(newSecondMenu.parentmenuid!);
          return Array.from(openKeysSet);
        });
      } else {
        setMenuSelectKeys([]);
      }
    }
  }, [secondAuthMenuList, flattenList, pathname]);

// 白名单
const routerWhiteList = ["/home"];
const AuthLayout = ({ children }: { children: JSX.Element }) => {
  const { pathname } = useLocation();
  // 判断当前路由是否在白名单内或者有当前权限路由
  const hasAuthRoute = useMemo(() => {
    return (
      routePathMatch(pathname, routerWhiteList) || hasAuthByRoutePath(pathname)
    );
  }, [pathname]);
   // 没有权限则跳转至404页面
  if (!hasAuthRoute) return <Navigate to="/404" replace />;
  return children;
};
export default AuthLayout;

{
    path: "/home",
    element: (
      <AuthLayout>
        <HomePage />
      </AuthLayout>
    ),
}

使用React-Router实现前端路由鉴权的示例代码
React路由鉴权的实现方法
React实现路由返回拦截的三种方式
react实现路由拦截的示例代码
React 中常用的几种路由跳转方式小结