feat: 增加权限控制组件方式

src/components/RequireAuth.jsx

@@ -6,8 +6,9 @@ export default function RequireAuth({ children, ...props }, ) {
   const isPermitted = useAuthStore((state) => state.isPermitted)
 
   if (isPermitted(props.subject)) {
+  // if (props.subject === '/account/management') {
     return children
-  } else {
+  } else if (props.result) {
     return (
       <Result
         status='403'

src/main.jsx

@@ -56,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: <RequireAuth subject={PERM_ACCOUNT_MANAGEMENT}><AccountManagement /></RequireAuth>},
+      { path: "account/management", element: <RequireAuth subject={PERM_ACCOUNT_MANAGEMENT} result={true}><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

@@ -3,8 +3,11 @@ import { Row, Col, Space, Button, Table, Select, TreeSelect, Typography, Modal,
 import { ExclamationCircleFilled } from '@ant-design/icons'
 import { useTranslation } from 'react-i18next'
 import useFormStore from '@/stores/Form'
+import useAuthStore from '@/stores/Auth'
 import useReservationStore from '@/stores/Reservation'
 import SearchForm from '@/components/SearchForm'
+import RequireAuth from '@/components/RequireAuth'
+import { PERM_ROLE_NEW } from '@/config'
 
 const { Title } = Typography
 
@@ -69,6 +72,7 @@ const permissionData = [
 
 function Management() {
   const { t } = useTranslation()
+
   const accountListColumns = [
     {
       title: t('account:username'),
@@ -174,6 +178,9 @@ function Management() {
 
   const formValuesToSub = useFormStore((state) => state.formValuesToSub)
 
+
+  const isPermitted = useAuthStore((state) => state.isPermitted)
+
   const [editAccountForm, editRoleForm] = Form.useForm()
   const [fetchReservationList] =
     useReservationStore((state) =>
@@ -388,7 +395,9 @@ function Management() {
           <Col span={24}>
             <Space>
               <Button onClick={() => setAccountModalOpen(true)}>{t('account:management.newAccount')}</Button>
-              <Button onClick={() => setRoleModalOpen(true)}>{t('account:management.newRole')}</Button>
+              <RequireAuth subject={PERM_ROLE_NEW}>
+                <Button onClick={() => setRoleModalOpen(true)}>{t('account:management.newRole')}</Button>
+              </RequireAuth>
             </Space>
           </Col>
         </Row>