FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Add permission control to element

Browse Source
This commit is contained in:
Fat Snake
2023-12-01 16:20:30 +08:00
parent 0bcadab98c
commit 406c362f84
9 changed files with 211 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/common/Permission.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
import { hasPermission } from '@/util/auth.tsx'
interface PermissionProps extends React.PropsWithChildren {
operationCode?: string
}
const Permission: React.FC<PermissionProps> = (props) => {
if (!props.operationCode || hasPermission(props.operationCode)) {
return props.children
}
return <></>
}
export default Permission

6
src/pages/Login.tsx
View File

@@ -28,13 +28,15 @@ const Login: React.FC = () => {
setToken(data?.token ?? '')
void messageApi.success('登录成功')
setTimeout(() => {
void getUserInfo().then((user) => {
refreshRouter()
if (searchParams.has('redirect')) {
navigate(searchParams.get('redirect') ?? '/')
} else {
navigate('/')
}
void getUserInfo().then((user) => {
refreshRouter()
notification.success({
message: '欢迎回来',
description: (

2
src/pages/UserFramework.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
import '@/assets/css/pages/tools-framework.scss'
import user from '@/router/user'
import { hasPathPermission } from '@/util/route'
import { hasPathPermission } from '@/util/auth'
import FitFullScreen from '@/components/common/FitFullScreen'
import Sidebar from '@/components/common/sidebar'
import SidebarItemList from '@/components/common/sidebar/SidebarItemList'

18
src/pages/system/Group.tsx
View File

@@ -11,6 +11,7 @@ import {
DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants'
import { useUpdatedEffect } from '@/util/hooks'
import { hasPermission } from '@/util/auth'
import { utcToLocalTime } from '@/util/datetime'
import {
r_sys_group_add,
@@ -21,6 +22,7 @@ import {
r_sys_group_update,
r_sys_role_get_list
} from '@/services/system'
import Permission from '@/components/common/Permission'
import FitFullScreen from '@/components/common/FitFullScreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -105,6 +107,7 @@ const Group: React.FC = () => {
render: (value, record) => (
<>
<AntdSpace size={'middle'}>
<Permission operationCode={'system:group:modify:status'}>
{value ? (
<a
style={{ color: COLOR_PRODUCTION }}
@@ -120,18 +123,23 @@ const Group: React.FC = () => {
启用
</a>
)}
</Permission>
<Permission operationCode={'system:group:modify:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
编辑
</a>
</Permission>
<Permission operationCode={'system:group:delete:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
</a>
</Permission>
</AntdSpace>
</>
)
@@ -488,6 +496,7 @@ const Group: React.FC = () => {
const toolbar = (
<FlexBox direction={'horizontal'} gap={10}>
<Permission operationCode={'system:group:add:one'}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
@@ -497,6 +506,7 @@ const Group: React.FC = () => {
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
</Permission>
<Card
hidden={tableSelectedItem.length === 0}
style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -551,10 +561,14 @@ const Group: React.FC = () => {
pagination={tableParams.pagination}
loading={isLoading}
onChange={handleOnTableChange}
rowSelection={{
rowSelection={
hasPermission('system:group:delete:multiple')
? {
type: 'checkbox',
onChange: handleOnTableSelectChange
}}
}
: undefined
}
/>
</Card>
)

19
src/pages/system/Role.tsx
View File

@@ -12,7 +12,7 @@ import {
} from '@/constants/common.constants'
import { useUpdatedEffect } from '@/util/hooks'
import { utcToLocalTime } from '@/util/datetime'
import { powerListToPowerTree } from '@/util/auth.tsx'
import { hasPermission, powerListToPowerTree } from '@/util/auth'
import {
r_sys_role_add,
r_sys_role_change_status,
@@ -22,6 +22,7 @@ import {
r_sys_role_delete,
r_sys_role_delete_list
} from '@/services/system'
import Permission from '@/components/common/Permission'
import FitFullScreen from '@/components/common/FitFullScreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -98,6 +99,7 @@ const Role: React.FC = () => {
render: (value, record) => (
<>
<AntdSpace size={'middle'}>
<Permission operationCode={'system:role:modify:status'}>
{value ? (
<a
style={{ color: COLOR_PRODUCTION }}
@@ -113,18 +115,23 @@ const Role: React.FC = () => {
启用
</a>
)}
</Permission>
<Permission operationCode={'system:role:modify:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
编辑
</a>
</Permission>
<Permission operationCode={'system:role:delete:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
</a>
</Permission>
</AntdSpace>
</>
)
@@ -498,6 +505,7 @@ const Role: React.FC = () => {
const toolbar = (
<FlexBox direction={'horizontal'} gap={10}>
<Permission operationCode={'system:role:add:one'}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
@@ -507,6 +515,7 @@ const Role: React.FC = () => {
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
</Permission>
<Card
hidden={tableSelectedItem.length === 0}
style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -561,10 +570,14 @@ const Role: React.FC = () => {
pagination={tableParams.pagination}
loading={isLoading}
onChange={handleOnTableChange}
rowSelection={{
rowSelection={
hasPermission('system:role:delete:multiple')
? {
type: 'checkbox',
onChange: handleOnTableSelectChange
}}
}
: undefined
}
/>
</Card>
)

19
src/pages/system/User.tsx
View File

@@ -12,6 +12,7 @@ import {
DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants'
import { useUpdatedEffect } from '@/util/hooks'
import { hasPermission } from '@/util/auth'
import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/util/datetime'
import {
r_sys_group_get_list,
@@ -23,6 +24,7 @@ import {
r_sys_user_get,
r_sys_user_update
} from '@/services/system'
import Permission from '@/components/common/Permission'
import { r_api_avatar_random_base64 } from '@/services/api/avatar'
import FitFullScreen from '@/components/common/FitFullScreen'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -188,18 +190,23 @@ const User: React.FC = () => {
render: (_, record) => (
<>
<AntdSpace size={'middle'}>
<Permission operationCode={'system:user:modify:password'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangePasswordBtnClick(record)}
>
修改密码
</a>
</Permission>
<Permission operationCode={'system:user:modify:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
编辑
</a>
</Permission>
<Permission operationCode={'system:user:delete:one'}>
{record.id !== '0' ? (
<a
style={{ color: COLOR_PRODUCTION }}
@@ -208,6 +215,7 @@ const User: React.FC = () => {
删除
</a>
) : undefined}
</Permission>
</AntdSpace>
</>
)
@@ -393,6 +401,7 @@ const User: React.FC = () => {
}).then((res) => {
const response = res.data
if (response.success) {
void message.success('修改密码成功')
resolve(true)
} else {
reject(response.msg)
@@ -884,6 +893,7 @@ const User: React.FC = () => {
const toolbar = (
<FlexBox direction={'horizontal'} gap={10}>
<Permission operationCode={'system:user:add:one'}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
@@ -893,6 +903,7 @@ const User: React.FC = () => {
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
</Permission>
<Card
hidden={tableSelectedItem.length === 0}
style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -951,11 +962,15 @@ const User: React.FC = () => {
pagination={tableParams.pagination}
loading={isLoadingUserData}
onChange={handleOnTableChange}
rowSelection={{
rowSelection={
hasPermission('system:user:delete:multiple')
? {
type: 'checkbox',
onChange: handleOnTableSelectChange,
getCheckboxProps: (record) => ({ disabled: record.id === '0' })
}}
}
: undefined
}
/>
</Card>
)

5
src/services/index.tsx
View File

@@ -7,6 +7,7 @@ import {
PERMISSION_TOKEN_RENEW_SUCCESS,
PERMISSION_UNAUTHORIZED
} from '@/constants/common.constants'
import { getRedirectUrl } from '@/util/route'
import { getToken, setToken, removeToken } from '@/util/auth'
const service: AxiosInstance = axios.create({
@@ -84,7 +85,9 @@ service.interceptors.response.use(
</>
)
setTimeout(() => {
location.reload()
location.replace(
getRedirectUrl('/login', `${location.pathname}${location.search}`)
)
}, 1500)
throw response?.data
case PERMISSION_ACCESS_DENIED:

44
src/util/auth.tsx
View File

@@ -121,6 +121,12 @@ export const getUsername = async () => {
return user.username
}
export const getUserId = async () => {
const user = await getUserInfo()
return user.id
}
export const getCaptchaSrc = () => {
captcha = getCaptcha(300, 150, 4)
return captcha.base64Src
@@ -227,3 +233,41 @@ const parentToTree = (data: _DataNode[]): _DataNode[] => {
return parents
}
export const getPermissionPath = (): string[] => {
const s = getLocalStorage(STORAGE_USER_INFO_KEY)
if (s === null) {
return []
}
const user = JSON.parse(s) as UserWithPowerInfoVo
const paths: string[] = []
user.menus.forEach((menu) => {
paths.push(menu.url)
})
return paths
}
export const hasPathPermission = (path: string) => {
return getPermissionPath().indexOf(path) !== -1
}
export const getPermission = (): string[] => {
const s = getLocalStorage(STORAGE_USER_INFO_KEY)
if (s === null) {
return []
}
const user = JSON.parse(s) as UserWithPowerInfoVo
const operationCodes: string[] = []
user.operations.forEach((operation) => {
operationCodes.push(operation.code)
})
return operationCodes
}
export const hasPermission = (operationCode: string) => {
return getPermission().indexOf(operationCode) !== -1
}

23
src/util/route.tsx
View File

@@ -1,5 +1,5 @@
import { getLocalStorage } from '@/util/browser.tsx'
import { STORAGE_USER_INFO_KEY } from '@/constants/common.constants.ts'
import { RouteObject } from 'react-router'
import { hasPathPermission } from '@/util/auth'
export const getRedirectUrl = (path: string, redirectUrl: string): string => {
return `${path}?redirect=${encodeURIComponent(redirectUrl)}`
@@ -15,25 +15,6 @@ export const getFullTitle = (data: _DataNode, preTitle?: string) => {
return data
}
export const getPermissionPath = (): string[] => {
const s = getLocalStorage(STORAGE_USER_INFO_KEY)
if (s === null) {
return []
}
const user = JSON.parse(s) as UserWithPowerInfoVo
const paths: string[] = []
user.menus.forEach((menu) => {
paths.push(menu.url)
})
return paths
}
export const hasPathPermission = (path: string) => {
return getPermissionPath().indexOf(path) !== -1
}
export const getAuthRoute = (
route: RouteJsonObject[],
parentPermission: boolean = false