文章摘要
这篇文章介绍了使用React+TypeScript和react-router v6实现权限管理的实现经验。文章主要围绕权限管理的逻辑展开，通过三种权限（用户、商家、管理员）实现高权限用户访问低权限页面的功能。核心内容包括：
1. **权限管理实现**：根据权限类型动态挂载不同的页面，例如用户权限只能访问用户页面，而管理员权限可以访问所有页面。通过路由表实现高权限权限的包含低权限页面的功能。
2. **路由表设计**：区分了原始路由表和带有拦截器的路由表，前者用于注册路由，后者用于拦截器管理。通过自定义类型`myRouteObj`扩展页面标题功能，并使用钩子函数`useMyRoutes`管理路由表的动态变化。
3. **钩子函数实现**：钩子函数`useMyRoutes`用于判断路由路径和标题替换，实现多级路由的动态标题切换功能。此外，还实现了路径错误跳转到404页面的功能。
4. **项目总结**：文章提到项目花了较长时间，虽然经验不足，但完成了基本功能实现。未来计划优化方法，验证实现的正确性。
文章内容简明扼要，重点突出权限管理的实现逻辑和路由表的构建方法，适合对React+Router v6有一定了解的开发者参考。
目录权限管理总结
学了一段时间的react+ts，想着写一个项目练练手，由于初次写react+ts项目，有很多东西并不知道应该怎么写，再加上之前写vue项目的习惯，突然转换react有点不习惯，有很多在vue中的写法，并不知道是否在react中仍然可行。写项目之前先考虑了权限管理，第一次使用react-router v6 也不知道是否有更好的写法。这次就来简单分享一下我实现权限管理以及拦截器中遇到的一些问题。
这次项目是有三种权限，分别是用户，商家以及管理员。这次写的权限管理是高级权限能访问低级权限的所有页面，但是低级权限不能访问高级权限的页面。
简单实现// 在这里进行判断用户权限使用不同的页面
import React from “react”;
import Merchant from “https://www.jb51.net/pages/merchant”;
import Admin from “https://www.jb51.net/pages/admin”;
import User from “https://www.jb51.net/pages/user”;
export default function Index() {
//这里使用power来判断是否登录，以及权限
let power=localStorage.getItem(“power”);
return (
<div>
{power ? (
power===”1″ ? (
<Merchant></Merchant>
) : (
<Admin></Admin>
)
) : (
<User></User>
)}
</div>
);
}
我实现权限管理的方式就是根据不同的权限挂载不同的页面，在页面中实现挂载不同的路由。
之后看一下我在三种不同页面中的路由定义以及具体内容，即不需要显示的路由就不应该被注册
user路由表// 引入路由
import Login from “https://www.jb51.net/pages/user/login”;
import Register from “https://www.jb51.net/pages/user/register”;
import NoPower from “https://www.jb51.net/pages/error/noPower”;
import NoPage from “https://www.jb51.net/pages/error/noPage”;
import { myRouteObj } from “https://www.jb51.net/type”;
//这里的myRouteObj是我自定义的一个类型用于拓展title实现页面标题的自动切换
export const userRoutes: myRouteObj[]=[
{
path: “/404”,
element: <NoPage></NoPage>,
title: ‘404’
},
{
path: “/login”,
element: <Login></Login>,
title: ‘登录’
},
{
path: “/register”,
element: <Register></Register>,
title: ‘注册’
},
];
const routes=[
…userRoutes,
{
path: “*”,
element: <NoPower></NoPower>,
title: ‘没有权限’
},
];
export default routes;
路由表中暴露了两个对象，分别是最”原始的对象”和使用的对象，这两个对象的区别就是是否有拦截器，为什么需要把这个给区分开，是因为我们的目的是高权限的用户能访问到低权限用户所能访问的页面，又由于我们是通过返回不同的页面来实现的权限管理（即使用过程中必须高权限的路由中包含低权限的路由）而且拦截器必须要放在最后，所以就分了两个来暴露，一个是供注册路由使用（有拦截器版本），另一个是由高级权限路由表合并使用
myRouteObj的内容
import { NonIndexRouteObject } from “react-router”;
export interface myRouteObj extends NonIndexRouteObject {
title?: string;
}
user页面的入口文件
import React from “react”;
import userRoutes from “/router/user”;
import { useMyRoutes } from “/hooks/route”;
export default function User() {
//这里的useMyRoutes是我自己封装的一个钩子函数
const element=useMyRoutes(userRoutes);
return <div>{element}</div>;
}
useMyRoutes钩子函数的具体内容
该钩子函数用于更换页面标题以及一级路由表中是否有该路由(没有的话会跳到404)，这里为什么只判断了一级路由表是因为我个人感觉一级路由如果输入错误，其就应该跳转到404页面，而二级路由输入错误，应该重定向到二级路由正确的位置，这样我感觉对用户要更友好一点，所以我在二级路由中添加了重定向的功能，并且也实现了替换标题的功能，如果没有标题的话会返回一个默认值import { useEffect } from “react”;
import { useLocation, useNavigate, useRoutes } from “react-router”;
import { myRouteObj } from “https://www.jb51.net/type”;
function flatDeep(children: any, findArr: any): string {
// 判断children数组中是否有想要的元素
let tempArr=children.map((item: any)=> item.path);
let index=tempArr.indexOf(findArr[0]);
if (index !==-1) {
return findArr.length > 1
? flatDeep(children[index], findArr.splice(1, findArr.length))
: children[index].title;
? children[index].title
: “商城”;
}
return “商城”;
}
export function useMyRoutes(routes: myRouteObj[]) {
// 判断路由表中是否有对应路由，如果没有就返回到404
const location=useLocation();
const navigate=useNavigate();
useEffect(()=> {
// 非空
const firstPathName=location.pathname
.split(“/”)
.filter((item)=> item !==””);
const firstPath=routes.map((item)=> item.path?.split(“/”)[1]);
let index=firstPath.indexOf(firstPathName[0]);
if (!index) {
navigate(“/404″);
return;
}
// 判断是否是首页
if (location.pathname===”/”) {
document.title=”商城”;
return;
}
// 判断是几级路由
if (firstPathName.length > 1) {
// 多级
document.title=flatDeep(
routes[index].children,
firstPathName.splice(1, firstPathName.length)
);
return;
}
// 一级
document.title=routes[index].title
? (routes[index].title as string)
: “商城”;
}, [location, navigate, routes]);
return useRoutes(routes);
}
商家的路由表
import { Navigate } from “react-router”;
import Merchant from “https://www.jb51.net/pages/merchant”;
import Commodity from “https://www.jb51.net/pages/merchant/commodity”;
import { userRoutes } from “https://www.jb51.net/article/user”;
import { getRoutesObj } from “https://www.jb51.net/utils”;
import { myRouteObj } from “https://www.jb51.net/type”;
const children: myRouteObj[]=[
{
path: “commodity”,
element: <Commodity></Commodity>,
},
];
const primitiveObj={
path: “/merchant
export function getRoutesObj(
reuseObj: myRouteObj[],
targetObj: myRouteObj,
childrenObj: myRouteObj[],
interceptorObj?: myRouteObj
) {
// 先复制一份children
const children=[…childrenObj];
// 判断是否有值
if (interceptorObj) {
children.push(interceptorObj);
}
return [
[
…reuseObj,
{
…targetObj,
children: children,
},
],
[
…reuseObj,
{
…targetObj,
children: […childrenObj],
},
],
];
}
商家入口文件
import React, { Fragment } from “react”;
import { Outlet } from “react-router”;
import { routes } from “/router/merchant”;
import { useMyRoutes } from “/hooks/route”;
import { myRouteObj } from “/type”;
export default function Merchant() {
const element=useMyRoutes(routes as myRouteObj[]);
return (
<Fragment>
{element}
<Outlet></Outlet>
</Fragment>
);
}
管理员的和商家的差不多，这里就不再过多叙述了
实现这个权限管理还是花了有一天多的时间，有很多东西没有这么写过，也不知道正规的是否应该这样写，不过现在还是先实现功能就行了，等之后随着不断的练习和学习，也能检验我这个方法是否是对的，第一次写react+TS的项目，仍有很多不足，如果哪位大佬有觉得不妥的地方，也欢迎指出，一同学习，共同进步。
到此这篇关于react-router v6实现权限管理+自动替换页面标题的文章就介绍到这了,更多相关react-router v6权限内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:React-Router(V6)的权限控制实现示例react-router?v6实现动态路由实例React-RouterV6+AntdV4实现Menu菜单路由跳转的方法react-router-dom?v6?通过outlet实现keepAlive?功能的实现详解react-router-dom v6版本基本使用介绍react-router-domV6版本的路由和嵌套路由写法详解