导航和菜单增加权限判断

src/stores/Auth.js

@@ -50,6 +50,9 @@ const useAuthStore = create((set, get) => ({
   },
 
   isPermitted: (perm) => {
+    // 测试权限使用：
+    // if (perm === '/account/management') return false
+    // if (perm === '/account/role/new') return false
     return true
     // 以上是 Hardcode 判断
     // 以下是权限列表从数据库读取后使用的方法

src/views/App.jsx

@@ -17,6 +17,8 @@ import useNoticeStore from '@/stores/Notice';
 import useAuthStore from '@/stores/Auth'
 import { usingStorage } from '@/hooks/usingStorage'
 
+import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA, PERM_AIR_TICKET } from '@/config'
+
 const { Header, Content, Footer } = Layout;
 const { Title } = Typography;
 
@@ -25,8 +27,8 @@ function App() {
 
   const [password, setPassword] = useState('')
 
-  const [validateUserPassword, tokenTimeout] = useAuthStore(
-    (state) => [state.validateUserPassword, state.tokenTimeout])
+  const [validateUserPassword, tokenTimeout, isPermitted] = useAuthStore(
+    (state) => [state.validateUserPassword, state.tokenTimeout, state.isPermitted])
 
   const { loginToken, userDetail } = usingStorage()
 
@@ -120,11 +122,11 @@ function App() {
 									mode='horizontal'
 									selectedKeys={[defaultPath]}
 									items={[
-										{ key: 'reservation', label: <Link to='/reservation/newest'>{t('menu.Reservation')}</Link> },
-										{ key: 'invoice', label: <Link to='/invoice'>{t('menu.Invoice')}</Link> },
-										{ key: 'feedback', label: <Link to='/feedback'>{t('menu.Feedback')}</Link> },
-										{ key: 'report', label: <Link to='/report'>{t('menu.Report')}</Link> },
-										{ key: 'airticket', label: <Link to='/airticket'>{t('menu.Airticket')}</Link> },
+                    isPermitted(PERM_OVERSEA) ? { key: 'reservation', label: <Link to='/reservation/newest'>{t('menu.Reservation')}</Link> } : null,
+										isPermitted(PERM_OVERSEA) ? { key: 'invoice', label: <Link to='/invoice'>{t('menu.Invoice')}</Link> } : null,
+										isPermitted(PERM_OVERSEA) ? { key: 'feedback', label: <Link to='/feedback'>{t('menu.Feedback')}</Link> } : null,
+										isPermitted(PERM_OVERSEA) ? { key: 'report', label: <Link to='/report'>{t('menu.Report')}</Link> } : null,
+										isPermitted(PERM_AIR_TICKET) ? { key: 'airticket', label: <Link to='/airticket'>{t('menu.Airticket')}</Link> } : null,
 										{
 											key: 'notice',
 											label: (
@@ -148,8 +150,8 @@ function App() {
 										items: [...[
                       { label: <Link to='/account/change-password'>{t('ChangePassword')}</Link>, key: '0' },
                       { label: <Link to='/account/profile'>{t('Profile')}</Link>, key: '1' },
-                      { label: <Link to='/account/management'>{t('account:management.tile')}</Link>, key: '3' },
-                      { label: <Link to='/account/role-list'>{t('account:management.roleList')}</Link>, key: '4' },
+                      isPermitted(PERM_ACCOUNT_MANAGEMENT) ? { label: <Link to='/account/management'>{t('account:management.tile')}</Link>, key: '3' } : null,
+                      isPermitted(PERM_ROLE_NEW) ? { label: <Link to='/account/role-list'>{t('account:management.roleList')}</Link>, key: '4' } : null,
                       { type: 'divider' },
                       { label: <Link to='/logout'>{t('Logout')}</Link>, key: '99' },
                     ],