安徽网站优化多少钱,软件界面设计的基本原则,营销型网站的案例,wordpress 站群模板以下代码都为部分核心代码
一.根据不同的登录用户#xff0c;返回不同的权限列表 #xff0c;以下是三种不同用户限权列表
const pression {
//超级管理员BigAdmin: [{key: screen,icon: FileOutlined,label: 数据图表,},{key: 返回不同的权限列表 以下是三种不同用户限权列表
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] useStateany()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]} modeinline 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-24表示在一级路由下索引为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
