react根据后端返回数据动态添加路由

以下代码都为部分核心代码

一.根据不同的登录用户，返回不同的权限列表 ，以下是三种不同用户限权列表

const pression = {
//超级管理员BigAdmin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "users",icon: "UserOutlined",label: "用户列表",},{key: "food",icon: "PieChartOutlined",label: "食谱",},{key: "discuss",icon: "CommentOutlined",label: "评论",}],
//普通管理员Admin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "food",icon: "PieChartOutlined",label: "食谱",}, {key: "discuss",icon: "CommentOutlined",label: "评论",}],
//普通用户commont: [{key: "screen",icon: "FileOutlined",label: "数据图表",}]}

二.实现动态菜单

用户登录后先将权限列表存入本地浏览器，再跳转到系统页面，并在首次加载时候获取本地权限列表数据，进行动态渲染

//假如登录的是超级管理员,对应的权限列表应如下，这里使用了ant design的菜单组件，为了方便所以使用符合该菜单组件的数据结构BigAdmin: [{key: "screen",icon: "FileOutlined",label: "数据图表",},{key: "users",icon: "UserOutlined",label: "用户列表",},{key: "food",icon: "PieChartOutlined",label: "食谱",},{key: "discuss",icon: "CommentOutlined",label: "评论",}],
//-----------------import * as Icons from '@ant-design/icons';//--自定义组件将字符串转化为对应的组件---------
const ICONFONT = (props: any) => {const { icon } = props//动态菜单不能确定需要那些icon,全部引入作为Iconsreturn React.createElement(Icons[icon])
}const [Enums, setenum] = useState<any>()const AdminInfo = useSelector((state: any) => state.AdminStore.AdminInfo)
useEffect(() => {
//登录后，系统首页获取本地权限列表，因为这里使用了ant design的icon，需要将字符串转化为对应的组件，这里封装的自定义组件let items = JSON.parse(JSON.stringify(AdminInfo.pression))items.map((item: any) => {item.icon = item.icon && <ICONFONT icon={item.icon}></ICONFONT>})setenum([...items])}, [])//在菜单组件中使用<Menu selectedKeys={['screen']} mode="inline" items={Enums} onClick={chooose} />

三.实现动态路由 

先把动态路由和静态路由分离出来，在路由配置文件中，这里需要进行动态添加的路由为 path: "/backstage"下的子路由，需要给他一个name，后续方便查找

//这里也很重要，页面加载时候，先判断本地是否存入了权限列表
import { Admin } from "@/utils/local"
//获取本地存储的信息
const rs = Admin.get_Admin()//路由懒加载
const lazyComponent = (Component: FC) => {return <Suspense fallback={Skeletons}><Component /></Suspense>
}//静态路由
const routers = [{path: '/',element: <Navigate to="/home" />},{path: "/",element: <App />,children: [{path: "/home",element: lazyComponent(Home),},{path: "/category",element: lazyComponent(About),children: [{path: "/category",element: <Navigate to={'/category/mainfood'}></Navigate>},{path: "mainfood",element: lazyComponent(Mainfood)},{path: "bake",element: lazyComponent(Bake)},{path: "beverage",element: lazyComponent(Beverage)},{path: "soup",element: lazyComponent(Soup)}]}, {path: "/user",element: lazyComponent(Test),}, {path: "/edituser",element: lazyComponent(EeditUser)},{path: "/editfood",element: lazyComponent(Edit_Food)}]},{path: "/detaile/:id",element: lazyComponent(Datile)},{path: "/login",element: <Login></Login>},{
//需要动态添加的路由在此处path: "/backstage",element: lazyComponent(Back),name: "back",children: [{path: "/backstage",element: <Navigate to="/backstage/screen"></Navigate>},{path: "screen",element: lazyComponent(Screen)},]},{path: "*",element: <Error></Error>}
]//准备需要添加的动态路由，将添加到 path: "/backstage"的子路由下，
//这里的id必须必须填写，而且必须唯一， 
//如：id:'4-2'，4表示在一级路由下索引为4的路由，2表示在该路由下子路由的索引
const dtRoute = [{path: "users",element: lazyComponent(Users),id: '4-2'},{path: "food",id: '4-3',element: lazyComponent(Food)},{path: "discuss",id: '4-4',element: lazyComponent(Discuss)}
]

定义一个动态添加路由的函数

const dtRoute = [{path: "users",element: lazyComponent(Users),id: '4-2'},{path: "food",id: '4-3',element: lazyComponent(Food)},{path: "discuss",id: '4-4',element: lazyComponent(Discuss)}
]const route = createBrowserRouter(routers)//这里需要导出函数，在登录后调用，pression即为后端返回的列表
export function addrouter(pression: any[]) {
//找到需要动态添加的路由，name为back,即为之前的path:"/backstage"路由const baseRouter = route.routes.find((rt: any) => rt.name === "back")console.log(baseRouter)if (pression.length !== 0) {//判断传入的权限列表是否在动态路由之中，有则追加进去for (const use of pression) {for (const rt of dtRoute) {if (rt.path === use.key) {baseRouter?.children?.push(rt)} else {}}}} else {
//如果传入的为空表示，退出登录，更新路由，这里取的最前两个静态路由，即删除动态路由baseRouter?.children?.splice(2)}
}//这里之前已提到，
import { Admin } from "@/utils/local"
const rs = Admin.get_Admin()
//-------页面刷新时候会重新执行路由文件---访问其它动态路由的时候会丢失找不到，
//因为动态路由只在登录的时候进行了添加,而页面刷新会让整个路由重新执行，而不会重新动态添加--
//所以刷新的时候要判断本地是否存储了动态路由信息，并再次添加
if (rs) {addrouter(rs.pression)
}

在redux中使用动态添加路由的函数

import { createSlice } from "@reduxjs/toolkit";
import { Admin } from "@/utils/local";
import { Admin_Loing } from '@/apis/admin/admin'
import { message } from "antd"
import type { AppDispatch } from "../index"//导入动态添加路由的函数
import { addrouter } from "@/router"
const AdminStore = createSlice({name: "RootStore",initialState: {AdminInfo: Admin.get_Admin() || {pression: [],user: {}}},reducers: {//定义登录方法，需要在登录后动态添加路由Login: (state, { payload }) => {state.AdminInfo = payloadAdmin.set_Admin(payload)
//调用动态添加路由的函数，并传入登录后传来的权限列表addrouter(payload.pression)},GoOut: (state) => {state.AdminInfo = {pression: [],user: {}}Admin.remove_Admin()addrouter([])},},
})//导出Login
export const { Login, GoOut } = AdminStore.actions//，登录是异步的，所以定义异步登录方法
const axios_admin_login = (data: any) => {return async (dispatch: AppDispatch) => {const res = await Admin_Loing(data)if (res.status == 200) {
//登录成功后调用Login，并传入包含权限列表的数据dispatch(Login(res.data))message.success("登录成功")return true} else {return false}}
}
//最后导出异步登录，在登录界面使用
export { axios_admin_login }
export default AdminStore.reducer