[add]页面权限控制

src/routers/auth.tsx

@@ -0,0 +1,51 @@
+
+const Auth = (props) => {
+    console.log(props, 'props')
+    let role = 'admin'
+    if (props.meta.role) {
+        if (!role.includes(props.meta.role)) {
+            return (
+                <div>没有权限</div>
+            )
+        }
+    }
+    return (
+        <>{props.children}</>
+    )
+}
+
+const authLoad = (element, meta = {}) => {
+    return <Auth meta={meta}>{element}</Auth>;
+};
+
+const transformRoutes = (routes) => {
+    let list = [];
+    routes.forEach((route) => {
+        const obj = { ...route };
+        if (obj.redirect) {
+            obj.element = <Navigate to={obj.redirect} replace={true} />;
+        }
+
+        if (obj.element) {
+            obj.element = authLoad(obj.element, obj.meta);
+        }
+
+        delete obj.redirect;
+        delete obj.meta;
+
+        if (obj.children) {
+            obj.children = transformRoutes(obj.children);
+        }
+        list.push(obj);
+    });
+    return list;
+};
+
+
+
+
+export {
+    Auth,
+    authLoad,
+    transformRoutes
+}

src/routers/guard.ts

@@ -2,6 +2,9 @@ import { useRoutes, useNavigate, useLocation } from 'react-router-dom'
 import { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useSelector } from 'react-redux'
+import { Auth, authLoad, transformRoutes } from './auth'
+
+// 路由登录守卫
 const Guard = (props) => {
     const { token } = useSelector(state => state.loginReducer)
     const navigate = useNavigate()//useNavigate钩子返回一个函数，这个hooks能够让我可以编程式的导航。
@@ -13,7 +16,11 @@ const Guard = (props) => {
             navigate('/')
         }
     }, [location.pathname])
-    const outlet = useRoutes(props.router)
+
+    // 添加用户权限守卫
+    const outlet = useRoutes(
+        transformRoutes(props.router)
+    )
     return outlet
 }
 

src/routers/index.tsx

@@ -30,14 +30,25 @@ const routes = [
             {
                 path: '/blogList',
                 element: lazyLoading(<Blog />),
+                meta:{
+                    title: '博客列表',
+                    role:['admin']
+                }
             },
             {
                 path: '/tagList',
                 element: lazyLoading(<Tag />),
+                meta:{
+                    title: '标签列表'
+                }
             },
             {
                 path: '/test',
                 element: lazyLoading(<Test />),
+                meta:{
+                    title: '测试',
+                    role:['tester']
+                }
             },
         ]
     },
@@ -51,4 +62,6 @@ const routes = [
     }
 ]
 
+
+
 export default routes