add css module compile rule and a login guard
Change-Id: I5c99e236f92d3b6c6d0060b36cf90a252df93a95
diff --git a/src/route/index.tsx b/src/route/index.tsx
index da0720e..5c69c6c 100644
--- a/src/route/index.tsx
+++ b/src/route/index.tsx
@@ -1,18 +1,31 @@
import { createBrowserRouter } from 'react-router-dom'
import PrivateRoute from './privateRoute'
+import { useSelector } from 'react-redux'
import Login from '../views/login'
import React from 'react'
import Forum from '../views/forum'
+import { RootState } from '@/store'
const router = createBrowserRouter([
{
path: '/',
- element: <Forum /> // 论坛主页面
+ element:<PrivateRoute
+ role={0} // 判断是否登录
+ redirectPath="/login"/>,
+ children: [
+ {
+ index: true,
+ element: <Forum /> // 论坛主页面
+ },
+ ]
},
{
path: '/login',
element: <Login /> // 登录页作为独立路由
}
+
+
+
]
)
diff --git a/src/route/privateRoute.tsx b/src/route/privateRoute.tsx
index 8391f90..992f372 100644
--- a/src/route/privateRoute.tsx
+++ b/src/route/privateRoute.tsx
@@ -1,22 +1,35 @@
import { Navigate, Outlet } from 'react-router-dom'
import React from 'react'
+import { useSelector } from 'react-redux'
interface PrivateRouteProps {
- isAllowed: boolean
+ role: number
redirectPath?: string
children?: React.ReactNode
}
const PrivateRoute = ({
- isAllowed,
+ role,
redirectPath = '/login',
children
}: PrivateRouteProps) => {
- if (!isAllowed) {
+ const isLogin = useSelector((state: any) => state.user.isLogin)
+ const userRole = useSelector((state: any) => state.user.role)
+
+ if (!isLogin) {
return <Navigate to={redirectPath} replace />
}
- return children ? children : <Outlet />
+ if (role && role >= userRole) {
+ return <Navigate to={redirectPath} replace />
+ }
+
+ return children ? (
+ <>{children}</>
+ ) : (
+ <Outlet />
+ )
+
}
export default PrivateRoute
\ No newline at end of file