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

杨教授

前言

React应用中的路由鉴权是确保用户仅能访问其授权页面的方式，用于已登录或具有访问特定页面所需的权限，由于React没有实现类似于Vue的路由守卫功能，所以只能由开发者自行实现。前端中的路由鉴权可以区分以下颗粒度：菜单权限控制、组件权限控制、路由权限控制。在后台管理系统中三者是必不可少的。这篇文章就来记录下React实现路由鉴权的流程。

确定权限树

开始之前我们需要对权限树的数据结构进行确定，一般来说我们需要拿到后端传回的权限树进行存储，在React中通常将权限树存储在Redux中，并且我们前端也需要自行维护一颗属于前端的权限树，这里需要两个权限树进行对比从而实现路由鉴权。权限树结构如下：

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

复制代码

权限树处理

在确定权限树后，我们需要对权限树结构进行打平。为此我们可以写个utils来处理权限树。我们使用递归来进行打平权限树：

1. export const getFlattenList = (
   
2.   authList: LocalMenuType[], // 需要打平的权限树
   
3.   flattenAuthList: LocalMenuType[], // 存储打平后的权限树
   
4.   level?: number // 打平层级
   
5. ) => {
   
6.   authList.forEach((item) => {
   
7.     // 如果查找层级超出则返回
   
8.     if (level && item.level > level) return;
   
9.     flattenAuthList.push(Object.assign({}, item, { children: [] }));
   
10.     if (item.children && item.children.length > 0) {
    
11.       getFlattenList(item.children, flattenAuthList, level);
    
12.     }
    
13.   });
    
14. };

复制代码

通过以上代码我们将一个树打平，打平后结构如下：

菜单权限控制

在后台系统中，每个角色有不同的菜单权限，我们需要根据后端返回的角色数据进行菜单的显示与隐藏，为了方便起见这里直接使用mock数据并将数据存储在localStorage中：

1. export enum RoleType {
   
2.   MANAGER,
   
3.   ONLY_ORDER,
   
4.   ONLY_VIEW_LIST,
   
5. }
   
6. 
   
7. export const setCurrentRole = (type: RoleType) => {
   
8.   switch (type) {
   
9.     case RoleType.MANAGER: {
   
10.       window.localStorage.setItem("menu", JSON.stringify(menus));
    
11.       break;
    
12.     }
    
13.     case RoleType.ONLY_ORDER: {
    
14.       window.localStorage.setItem("menu", JSON.stringify(onlyOrder));
    
15.       break;
    
16.     }
    
17.     case RoleType.ONLY_VIEW_LIST: {
    
18.       window.localStorage.setItem("menu", JSON.stringify(onlyViewList));
    
19.       break;
    
20.     }
    
21.   }
    
22. };
    
23. 
    
24. export const getCurrentRole = () =>
    
25.   JSON.parse(window.localStorage.getItem("menu")) as LocalMenuType[];

复制代码

通过localStorage得到的角色信息进行显示菜单，这里我们只显示1,2级菜单，所以需要对权限菜单进行处理，只保留1,2的菜单数据，也是需要用到递归来处理：

1. // 处理权限菜单
   
2. const handleAuthMenu = (
   
3.   menuList: LocalMenuType[],// 全部菜单权限树
   
4.   authCodes: string[], // 角色所有权限
   
5.   authMenuList: LocalMenuType[], // 角色最终拥有菜单列表
   
6.   level?: number // 处理层级
   
7. ) => {
   
8.   menuList.forEach((menu) => {
   
9.     // 如果level 存在，则只处理小于level的情况
   
10.     if (level && menu.level > level) return;
    
11.     // 如果有权限，则继续递归遍历菜单
    
12.     if (authCodes.includes(menu.menucode)) {
    
13.       let newAuthMenu: LocalMenuType = { ...menu, children: undefined };
    
14. 
    
15.       let newAuthMenuChildren: LocalMenuType[] = [];
    
16.       if (menu.children && menu.children.length > 0) {
    
17.         handleAuthMenu(menu.children, authCodes, newAuthMenuChildren, level);
    
18.       }
    
19.       // 添加子菜单
    
20.       if (newAuthMenuChildren.length > 0) {
    
21.         newAuthMenu.children = newAuthMenuChildren;
    
22.       }
    
23.       authMenuList.push(newAuthMenu);
    
24.     }
    
25.   });
    
26. };
    
27. // 获取角色权限菜单
    
28. export const getAuthMenu = (flattenAuth: LocalMenuType[], level?: number) => {
    
29.   // 获取权限菜单的menucode
    
30.   const authCodes: string[] = flattenAuth.map((auth) => auth.menucode);
    
31.   let authMenu: LocalMenuType[] = [];
    
32. 
    
33.   handleAuthMenu(menus, authCodes, authMenu, level);
    
34. 
    
35.   return authMenu;
    
36. };

复制代码

在获取完角色1,2级菜单后，我们需要对左侧菜单栏进行初始化，默认为菜单列表中第一个path。获取二级菜单的首位菜单路由之后通过useNavigate进行跳转。获取菜单路由通过getRoutePath进行获取，由于一个页面可能包含多个路由，所以需要对path信息进行判断：

1. // anthRoles.ts
   
2. // 获取菜单路由
   
3. export const getRoutePath = (localMenu: LocalMenuType) => {
   
4.   return localMenu.path
   
5.     ? typeof localMenu.path === "object"
   
6.       ? localMenu.path[0]
   
7.       : localMenu.path
   
8.     : null;
   
9. };
   
10. // home.tsx
    
11. //2级菜单list
    
12. const secondAuthMenuList = useMemo(() => {
    
13.     return flattenList.filter((res) => res.level === 2);
    
14.   }, [flattenList]);
    
15. // 初始化菜单
    
16.   useEffect(() => {
    
17.     const initMenuItem = secondAuthMenuList[0];
    
18.     if (initMenuItem) {
    
19.       const initRoute =
    
20.         initMenuItem.level > 2 ? pathname : getRoutePath(initMenuItem)!;
    
21.       navigate(initRoute, { replace: true });
    
22.     }
    
23.   }, [secondAuthMenuList, flattenList]);

复制代码

那如何根据点击的菜单进行跳转呢？也是需要获取对应key值的二级菜单path进行跳转：

1. const findSecondMenuByKey = (key: string) =>
   
2.     secondAuthMenuList.find((item) => item.key === key);
   
3.    
   
4.     // 点击菜单进行跳转
   
5. const handleMenuChange = ({ key }: { key: string }) => {
   
6.     setMenuSelectKeys([key]);
   
7.     let chooseItem = findSecondMenuByKey(key);
   
8.     if (chooseItem?.path) navigate(getRoutePath(chooseItem) || "");
   
9.   };

复制代码

最终实现效果如下：

组件权限控制

组件权限控制相对简单，需要通过menucode也就是权限码进行组件的显示与隐藏，这里以按钮组件为例子，我们需要一个高阶组件AuthBuutonHOC作为按钮组件的父组件进行显示，同时，我们通过hasAuth函数判断是否有当前指定权限：

1. // 是否有当前权限
   
2. export const hasAuth = (meunCode: string) => {
   
3.   // 当前打平的角色权限树
   
4.   let flattenAuthList: LocalMenuType[] = getCurrentFlattenRole();
   
5.   return !!flattenAuthList.find((auth) => auth.menucode === meunCode);
   
6. };
   
7. AuthBuutonHOC.tsx
   
8. 
   
9. const AuthButton: React.FC<Props> = ({ menuCode, children }) => {
   
10.   // 没有当前权限则不显示
    
11.   if (!hasAuth(menuCode)) return null;
    
12. 
    
13.   return <>{children}</>;
    
14. };
    
15. 
    
16. export default React.memo(AuthButton);

复制代码

使用AuthButton包裹按钮，就能实现组件级别的权限控制：

• 有当前权限：
  

• 无当前权限：
  

路由权限控制

路由权限控制需要对用户输入的路径名进行校验，我们通过useLocation获取到当前用户输入的pathname；并路径匹配matchPath判断当前路径与权限菜单路径是否对应，若对应上则表示当前角色拥有权限，若对应不上则跳转到404页面。
通过以上逻辑，我们先创建一个hasAuthByRoutePath函数来判断是否有当前的路由权限：

1. // 是否有当前的路由权限
   
2. export const hasAuthByRoutePath = (path: string) => {
   
3.   let flattenAuthList: LocalMenuType[] = getCurrentFlattenRole();
   
4.   return !!flattenAuthList.find((auth) =>
   
5.     routePathMatch(path, auth.path || "")
   
6.   );
   
7. };
   
8. 
   
9. // 判断路由是否一致
   
10. export const routePathMatch = (path: string, menuPath: string | string[]) => {
    
11.   if (typeof menuPath === "object") {
    
12.     return menuPath.some((item) => matchPath(item, path));
    
13.   }
    
14. 
    
15.   return !!matchPath(menuPath, path);
    
16. };

复制代码

在home页面监听用户输入的路径名进行判断，有则跳转到当前菜单：

1. useEffect(() => {
   
2.     // 获取当前匹配到的菜单
   
3.     const matchMenuItem = flattenList.find((item) =>
   
4.       routePathMatch(pathname, item.path || "")
   
5.     );
   
6.     if (matchMenuItem) {
   
7.       // 如果当前菜单level为3级或者更小则设置其父id，否则设置其id
   
8.       matchMenuItem.level > 2
   
9.         ? setMenuSelectKeys([matchMenuItem.parentmenuid!])
   
10.         : setMenuSelectKeys([matchMenuItem.key]);
    
11.       // 如果当前菜单level为3级或者更小则通过父id找到2级菜单
    
12.       const newSecondMenu =
    
13.         matchMenuItem.level > 2
    
14.           ? findSecondMenuByKey(matchMenuItem.parentmenuid!)
    
15.           : matchMenuItem;
    
16.       // 有对应的二级菜单则定位到当前侧边菜单栏位置
    
17.       if (newSecondMenu) {
    
18.         setMenuOpenKeys((preOpenKeys) => {
    
19.           const openKeysSet = new Set(preOpenKeys || []);
    
20.           openKeysSet.add(newSecondMenu.parentmenuid!);
    
21.           return Array.from(openKeysSet);
    
22.         });
    
23.       } else {
    
24.         setMenuSelectKeys([]);
    
25.       }
    
26.     }
    
27.   }, [secondAuthMenuList, flattenList, pathname]);

复制代码

最后，如果没有当前路径权限则跳转到404页面，为此我们需要一个authLayout高阶组件来包裹HomePage来实现跳转：

1. // 白名单
   
2. const routerWhiteList = ["/home"];
   
3. 
   
4. const AuthLayout = ({ children }: { children: JSX.Element }) => {
   
5.   const { pathname } = useLocation();
   
6. 
   
7.   // 判断当前路由是否在白名单内或者有当前权限路由
   
8.   const hasAuthRoute = useMemo(() => {
   
9.     return (
   
10.       routePathMatch(pathname, routerWhiteList) || hasAuthByRoutePath(pathname)
    
11.     );
    
12.   }, [pathname]);
    
13.    // 没有权限则跳转至404页面
    
14.   if (!hasAuthRoute) return <Navigate to="/404" replace />;
    
15. 
    
16.   return children;
    
17. };
    
18. 
    
19. export default AuthLayout;

复制代码

将以上组件包裹在HomePage外层即可实现路由权限控制：

1. {
   
2.     path: "/home",
   
3.     element: (
   
4.       <AuthLayout>
   
5.         <HomePage />
   
6.       </AuthLayout>
   
7.     ),
   
8. }

复制代码

具体实现效果如下：

总结

到此这篇关于React实现路由鉴权的实例详解的文章就介绍到这了,更多相关React路由鉴权内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3235293j2.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！