update permission

src/contexts/auth/index.tsx

@@ -1,8 +1,8 @@
 import Loader from "@/components/loader";
-import React, {createContext, useEffect, useReducer} from "react";
+import React, { createContext, useEffect, useReducer } from "react";
-import {auth, getUserInfo} from "@/service/api/user.ts";
+import { auth, getUserInfo } from "@/service/api/user.ts";
-import {getAuthToken, setAuthToken} from "@/hooks/useAuth.ts";
+import { getAuthToken, setAuthToken } from "@/hooks/useAuth.ts";
-import {getRoleByDepartName} from "@/contexts/auth/role.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){
+function getCurrentRole(username: string) {
-    const role = localStorage.getItem(UserRoleStorageKey);
+    return (localStorage.getItem(UserRoleStorageKey) || getRoleByUsername(username)) as UserRole
-    if(role){
-        return role as UserRole
-    }
-    return getRoleByDepartName(department)
 }
 
-export function setCurrentRole(role: UserRole){
+export function setCurrentRole(role: UserRole) {
-    localStorage.setItem(UserRoleStorageKey,role)
+    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

src/contexts/auth/role.ts

@@ -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;
+}

src/routes/layout/dashboard-layout.tsx

@@ -38,13 +38,20 @@ 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>
+                            <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>
                 <Dropdown.Menu>
@@ -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>) }

src/types/auth.d.ts

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