feat: 增加权限路由组件，还有账号管理常量

src/components/ErrorPage.jsx

@@ -1,12 +1,12 @@
-import { useRouteError } from "react-router-dom"
+import { useRouteError } from 'react-router-dom'
 import { Result } from 'antd'
 
 export default function ErrorPage() {
   const errorResponse = useRouteError()
   return (
     <Result
-      status="404"
-      title="Sorry, an unexpected error has occurred."
+      status='404'
+      title='Sorry, an unexpected error has occurred.'
       subTitle={errorResponse?.message || errorResponse.error?.message}
     />
   )

src/components/RequireAuth.jsx

@@ -0,0 +1,19 @@
+import { Result } from 'antd'
+import useAuthStore from '@/stores/Auth'
+
+export default function RequireAuth({ children, ...props }, ) {
+
+  const isPermitted = useAuthStore((state) => state.isPermitted)
+
+  if (isPermitted(props.subject)) {
+    return children
+  } else {
+    return (
+      <Result
+        status='403'
+        title='403'
+        subTitle={'抱歉，你没有权限使用该功能。'}
+      />
+    )
+  }
+}

src/config.js

@@ -9,3 +9,10 @@ export const SMALL_DATETIME_FORMAT = "YYYY-MM-DD 23:59";
 
 const __BUILD_VERSION__ = `__BUILD_VERSION__`.replace(/"/g, '')
 export const BUILD_VERSION = import.meta.env.PROD ? __BUILD_VERSION__ : import.meta.env.MODE;
+
+// 权限常量定义
+export const PERM_ACCOUNT_MANAGEMENT = '/account/management'
+export const PERM_ACCOUNT_NEW = '/account/new'
+export const PERM_ACCOUNT_DISABLE = '/account/disable'
+export const PERM_ACCOUNT_RESET_PASSWORD = '/account/reset-password'
+export const PERM_ROLE_NEW = '/account/role/new'

src/main.jsx

@@ -14,6 +14,7 @@ import Login from "@/views/Login";
 import Logout from "@/views/Logout";
 import Index from "@/views/index";
 import ErrorPage from "@/components/ErrorPage";
+import RequireAuth from '@/components/RequireAuth'
 import ReservationNewest from "@/views/reservation/Newest";
 import ReservationDetail from "@/views/reservation/Detail";
 import ChangePassword from "@/views/account/ChangePassword";
@@ -31,6 +32,8 @@ import InvoicePaid from "@/views/invoice/Paid";
 import InvoicePaidDetail from "@/views/invoice/PaidDetail";
 import Airticket from "@/views/airticket/Index";
 
+import { PERM_ACCOUNT_MANAGEMENT } from '@/config'
+
 import './i18n';
 
 configure({
@@ -53,7 +56,7 @@ const router = createBrowserRouter([
       { path: "reservation/:reservationId", element: <ReservationDetail />},
       { path: "account/change-password", element: <ChangePassword />},
       { path: "account/profile", element: <AccountProfile />},
-      { path: "account/management", element: <AccountManagement />},
+      { path: "account/management", element: <RequireAuth subject={PERM_ACCOUNT_MANAGEMENT}><AccountManagement /></RequireAuth>},
       { path: "feedback", element: <FeedbackIndex />},
       { path: "feedback/:GRI_SN/:CII_SN/:RefNo", element: <FeedbackCustomerDetail />},
       { path: "feedback/:GRI_SN/:RefNo", element: <FeedbackDetail />},

src/views/account/Management.jsx

@@ -65,7 +65,7 @@ const permissionData = [
       },
     ],
   },
-];
+]
 
 function Management() {
   const { t } = useTranslation()
@@ -121,8 +121,8 @@ function Management() {
   }
 
   const onPermissionChange = (newValue) => {
-    console.log('onChange ', newValue);
-    setPermissionValue(newValue);
+    console.log('onChange ', newValue)
+    setPermissionValue(newValue)
   }
 
   const [permissionValue, setPermissionValue] = useState(['0-0-0'])