project/chuhai-payment-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update permission

Browse Source
This commit is contained in:
LittleBoy 2024-07-27 00:16:31 +08:00
parent 30f210ecd5
commit b13f61b81a
4 changed files with 67 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/contexts/auth/index.tsx
View File

@ -1,8 +1,8 @@
import Loader from "@/components/loader";
import React, {createContext, useEffect, useReducer} from "react";
import {auth, getUserInfo} from "@/service/api/user.ts";
import {getAuthToken, setAuthToken} from "@/hooks/useAuth.ts";
import {getRoleByDepartName} from "@/contexts/auth/role.ts";
import React, { createContext, useEffect, useReducer } from "react";
import { auth, getUserInfo } from "@/service/api/user.ts";
import { getAuthToken, setAuthToken } from "@/hooks/useAuth.ts";
import { getRoleByUsername } from "@/contexts/auth/role.ts";
const AuthContext = createContext<AuthContextType | null>(null)
@ -42,28 +42,24 @@ const authReducer = (state: AuthProps, action: { action?: string, payload: Parti
}
const UserRoleStorageKey = 'user-current-role';
function getCurrentRole(department?:string){
const role = localStorage.getItem(UserRoleStorageKey);
if(role){
return role as UserRole
}
return getRoleByDepartName(department)
function getCurrentRole(username: string) {
return (localStorage.getItem(UserRoleStorageKey) || getRoleByUsername(username)) as UserRole
}
export function setCurrentRole(role: UserRole){
localStorage.setItem(UserRoleStorageKey,role)
export function setCurrentRole(role: UserRole) {
localStorage.setItem(UserRoleStorageKey, role)
}
function removeRoleStorage(){
function removeRoleStorage() {
localStorage.removeItem(UserRoleStorageKey)
}
export const AuthProvider = ({children}: { children: React.ReactNode }) => {
export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
const [state, dispatch] = useReducer(authReducer, initialState);
// MOCK INIT DATA
const init = async () => {
const token = getAuthToken();
if(!token){
if (!token) {
dispatch({
payload: {
isInitialized: true,
@ -77,9 +73,10 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
payload: {
isInitialized: true,
isLoggedIn: !!user,
user:{
user: {
...user,
role: getCurrentRole(user.department)
origin_role: getRoleByUsername(user.username),
role: getCurrentRole(user.username)
}
}
})
@ -96,16 +93,17 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
const login = async (code: string, state: string) => {
const user = await auth(code, state)
// 保存token
setAuthToken(user.token, user.expiration_time?(new Date(user.expiration_time)).getTime():-1);
setAuthToken(user.token, user.expiration_time ? (new Date(user.expiration_time)).getTime() : -1);
//
dispatch({
action: 'login',
payload: {
isLoggedIn: true,
user:{
user: {
...user,
role: getCurrentRole(user.department)
origin_role: getRoleByUsername(user.username),
role: getCurrentRole(user.username)
}
}
})
@ -150,7 +148,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
dispatch({
action: 'updateUser',
payload: {
user:{
user: {
...state.user,
...user
} as never,
@ -165,12 +163,12 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
// 判断是否已经初始化
if (state.isInitialized !== undefined && !state.isInitialized) {
return <Loader/>;
return <Loader />;
}
return (<AuthContext.Provider value={{
...state,
login, logout,
mockLogin,updateUser
mockLogin, updateUser
}}>{children}</AuthContext.Provider>)
}
export default AuthContext

32
src/contexts/auth/role.ts
View File

@ -4,6 +4,38 @@ const RoleConfig: { [key: string]: UserRole } = {
'FO': 'fo',
}
/*
11. 权限管理:
- RO: Kitty
- FO 1: Cecilia, Zoe, Jacko
- FO 2: 现场支付和查询账单：Ancus
- 超级管理员权限：可以添加用户和权限。
ETSO: 超级管理员，用户名：michaelding，kennytan
RO： 现场支付和查看，用户名：kittyho
FO2：现场支付和查看，用户名：ancuscheng
FO：全部权限，用户名： ceciliachan sylam jackoyeung
STAFF: 现场支付
*/
const UserRoles: { [key: string]: string[] } = {
'root': ['michaelding', 'kennytan','itsotest010'],
'ro': ['kittyho', 'ancuscheng'],
'fo': ['ceciliachan', 'sylam', 'jackoyeung'],
}
export function getRoleByDepartName(departName?: string, defaultRole: UserRole = 'staff') {
return (departName ? (RoleConfig[departName] || defaultRole) : defaultRole);
}
export function getRoleByUsername(username: string, defaultRole: UserRole = 'staff') {
const roles = ['root', 'ro', 'fo'];
for (const r of roles) {
if (UserRoles[r].includes(username.toLowerCase())) {
return r as UserRole;
}
}
return defaultRole;
}

19
src/routes/layout/dashboard-layout.tsx
View File

@ -38,12 +38,19 @@ export const HeaderUserAvatar = () => {
<>
<HeaderUserProfile>
<Space>
<Avatar color="orange" size="small"><IconUser /></Avatar>
<Avatar color="orange" size="default"><IconUser /></Avatar>
<div>
<Typography.Title heading={6}>{user?.username}</Typography.Title>
<Typography.Text
type="quaternary"
size={'small'}>Department:{user?.department?.toUpperCase()}</Typography.Text>
<div style={{maxWidth:250,overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis'}}>
<Typography.Text
type="quaternary"
size={'small'}>Department:{user?.department?.toUpperCase()}</Typography.Text>
</div>
<div>
<Typography.Text
type="quaternary"
size={'small'}>Role:{user?.role?.toUpperCase()}</Typography.Text>
</div>
</div>
</Space>
</HeaderUserProfile>
@ -68,7 +75,7 @@ const RoleSwitcher = ()=>{
})
}
return (<>
{AppMode !== 'production' && (<Dropdown
{user?.origin_role == 'root' && (<Dropdown
clickToHide
render={
<Dropdown.Menu>
@ -84,7 +91,7 @@ const RoleSwitcher = ()=>{
<Button theme="borderless">
<Space style={{transform:'translateY(3px)'}}>
<IconRoles size={20} color={'white'} />
<span style={{color:'white'}}>{user?.department?.toUpperCase()}</span>
<span style={{color:'white'}}>{user?.role?.toUpperCase()}</span>
</Space>
</Button>
</Dropdown>) }

1
src/types/auth.d.ts vendored
View File

@ -13,6 +13,7 @@ declare type UserProfile = {
nbf: number;
type: string;
role: UserRole;
origin_role?: UserRole;
}
declare interface AuthProps {