update user role and save to localstorage

src/contexts/auth/index.tsx

@@ -2,6 +2,7 @@ import Loader from "@/components/loader";
 import React, {createContext, useEffect, useReducer} from "react";
 import {auth, getUserInfo} from "@/service/api/user.ts";
 import {setAuthToken} from "@/hooks/useAuth.ts";
+import {getRoleByDepartName} from "@/contexts/auth/role.ts";
 
 
 const AuthContext = createContext<AuthContextType | null>(null)
@@ -40,6 +41,22 @@ 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)
+}
+
+export function setCurrentRole(role: UserRole){
+    localStorage.setItem(UserRoleStorageKey,role)
+}
+function removeRoleStorage(){
+    localStorage.removeItem(UserRoleStorageKey)
+}
+
 export const AuthProvider = ({children}: { children: React.ReactNode }) => {
     const [state, dispatch] = useReducer(authReducer, initialState);
 
@@ -53,6 +70,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
                     isLoggedIn: !!user,
                     user:{
                         ...user,
+                        role: getCurrentRole(user.department)
                     }
                 }
             })
@@ -70,6 +88,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
         const user = await auth(code, state)
         // 保存token
         setAuthToken(user.token, user.expiration_time?(new Date(user.expiration_time)).getTime():-1);
+
         //
         dispatch({
             action: 'login',
@@ -77,6 +96,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
                 isLoggedIn: true,
                 user:{
                     ...user,
+                    role: getCurrentRole(user.department)
                 }
             }
         })
@@ -84,6 +104,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
     // 登出
     const logout = async () => {
         setAuthToken(null)
+        removeRoleStorage()
         dispatch({
             action: 'logout',
             payload: {
@@ -103,7 +124,8 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
                     token: 'test-123123',
                     expiration_time: '',
                     email: 'test@qq.com',
-                    department: 'root',
+                    department: '',
+                    role: 'staff',
                     exp: 1,
                     iat: 1,
                     iss: "Hong Kong Chu Hai College",

src/contexts/auth/role.ts

@@ -0,0 +1,9 @@
+const RoleConfig: { [key: string]: UserRole } = {
+	'Education Technology Service Office': 'root',
+	'RO': 'ro',
+	'FO': 'fo',
+}
+
+export function getRoleByDepartName(departName?: string, defaultRole: UserRole = 'staff') {
+	return (departName ? (RoleConfig[departName] || defaultRole) : defaultRole);
+}

src/routes/layout/dashboard-layout.tsx

@@ -12,6 +12,7 @@ import {IconExit, IconUser} from "@douyinfe/semi-icons";
 import styled from "@emotion/styled";
 import useConfig from "@/hooks/useConfig.ts";
 import {IconRoles} from "@/components/icons";
+import {setCurrentRole} from "@/contexts/auth";
 
 const {Header, Content, Sider} = Layout;
 
@@ -57,10 +58,15 @@ export const HeaderUserAvatar = () => {
         <Avatar color="orange" size="small"><IconUser /></Avatar>
     </Dropdown>)
 }
-const RoleList = ['root', 'ro', 'fo','staff']
+const RoleList: UserRole[] = ['root', 'ro', 'fo','staff']
 const RoleSwitcher = ()=>{
     const {user, updateUser} = useAuth()
-
+    // update user role
+    const changeRole = (role:UserRole)=>{
+        updateUser({role}).then(()=>{
+            setCurrentRole(role)
+        })
+    }
     return (<>
         {AppMode !== 'production' && (<Dropdown
             clickToHide
@@ -68,8 +74,8 @@ const RoleSwitcher = ()=>{
                 <Dropdown.Menu>
                     {RoleList.map((key) => (
                         <Dropdown.Item
-                            active={user?.department == key} key={key}
+                            active={user?.role == key} key={key}
-                            onClick={() => updateUser({department: key})}
+                            onClick={() => changeRole(key)}
                         ><span>{key.toUpperCase()}</span></Dropdown.Item>
                     ))}
                 </Dropdown.Menu>

src/routes/layout/dashboard-navigation.tsx

@@ -33,7 +33,7 @@ export function DashboardNavigation() {
         if (!user) return [];
 
         return AllDashboardMenu.filter(it => {
-            return !it.role || it.role.includes(user.department)
+            return !it.role || it.role.includes(user.role)
         });
     }, [user])
     return (<div className={'dashboard-menu-container'}>

src/types/auth.d.ts

@@ -1,3 +1,5 @@
+declare type UserRole = 'root' | 'ro' | 'fo' | 'staff'
+
 declare type UserProfile = {
     id: string | number;
     token: string;
@@ -10,6 +12,7 @@ declare type UserProfile = {
     iss: string;
     nbf: number;
     type: string;
+    role: UserRole;
 }
 
 declare interface AuthProps {