角色弹框

src/App.vue

@@ -4,6 +4,7 @@
 		<LockScreen v-if="themeConfig.isLockScreen" />
 		<Settings ref="settingsRef" v-show="themeConfig.lockScreenTime > 1" />
 		<CloseFull v-if="!themeConfig.isLockScreen" />
+		<ChangeRoleFir ref="changeRoleFirRef" />
 	</el-config-provider>
 </template>
 
@@ -14,16 +15,19 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 import other from '/@/utils/other';
 import { Local, Session } from '/@/utils/storage';
 import mittBus from '/@/utils/mitt';
+import { needRoleSelection, isRoleDialogTriggered, setRoleDialogTriggered } from '/@/utils/roleSelect';
 import setIntroduction from '/@/utils/setIconfont';
 
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
 const Settings = defineAsyncComponent(() => import('./layout/navBars/breadcrumb/settings.vue'));
 const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/closeFull.vue'));
+const ChangeRoleFir = defineAsyncComponent(() => import('/@/views/admin/system/role/changeRole-fir.vue'));
 
 // 定义变量内容
 const { messages, locale } = useI18n();
 const settingsRef = ref();
+const changeRoleFirRef = ref<{ open: () => void }>();
 const route = useRoute();
 const stores = useTagsViewRoutes();
 const storesThemeConfig = useThemeConfig();
@@ -44,6 +48,7 @@ const getGlobalComponentSize = computed(() => {
 const getGlobalI18n = computed(() => {
 	return messages.value[locale.value];
 });
+
 // 设置初始化，防止刷新时恢复默认
 onBeforeMount(() => {
 	// 设置批量第三方 icon 图标
@@ -67,11 +72,23 @@ onMounted(() => {
 		if (Session.get('isTagsViewCurrenFull')) {
 			stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
 		}
+		// 全局判断：已登录但 Local 缺少角色信息时弹出角色选择；弹框已触发则不再重复弹出
+		if (Session.getToken() && needRoleSelection() && !isRoleDialogTriggered()) {
+			setRoleDialogTriggered(true);
+			setTimeout(() => {
+				changeRoleFirRef.value?.open();
+			}, 300);
+		}
+		// 请求拦截器里也会在发送请求时判断并 emit，此处统一监听打开弹框
+		mittBus.on('openRoleSelectDialog', () => {
+			changeRoleFirRef.value?.open();
 		});
 	});
-// 页面销毁时，关闭监听布局配置/i18n监听
+});
+// 页面销毁时，关闭监听
 onUnmounted(() => {
 	mittBus.off('openSettingsDrawer', () => {});
+	mittBus.off('openRoleSelectDialog');
 });
 // 监听路由的变化，设置网站标题
 watch(

src/types/mitt.d.ts

@@ -23,6 +23,7 @@ declare type MittType<T = any> = {
 	openShareTagsView?: string;
 	onTagsViewRefreshRouterView?: T;
 	onCurrentContextmenuClick?: T;
+	openRoleSelectDialog?: string;
 };
 
 // mitt 参数类型定义

src/utils/request.ts

@@ -5,6 +5,8 @@ import qs from 'qs';
 import other from './other';
 import { paramsFilter } from "/@/flow";
 import { wrapEncryption, encryptRequestParams, decrypt } from './apiCrypto';
+import mittBus from '/@/utils/mitt';
+import { needRoleSelection, isRoleDialogTriggered, setRoleDialogTriggered } from '/@/utils/roleSelect';
 
 // 常用header
 export enum CommonHeaderEnum {
@@ -81,6 +83,12 @@ service.interceptors.request.use(
 		// 自动适配单体和微服务架构不同的URL
 		config.url = other.adaptationUrl(config.url);
 
+		// 发送请求时判断：已登录但缺少角色信息则弹出角色选择；若弹框已触发则不再重复弹出
+		if (token && needRoleSelection() && !isRoleDialogTriggered()) {
+			setRoleDialogTriggered(true);
+			mittBus.emit('openRoleSelectDialog');
+		}
+
 		// 处理完毕，返回config对象
 		return config;
 	},

src/utils/roleSelect.ts

@@ -0,0 +1,24 @@
+import { Local } from '/@/utils/storage';
+
+/** Local 是否缺少角色信息（缺任一则需弹出角色选择） */
+export function needRoleSelection(): boolean {
+	try {
+		const roleCode = Local.get('roleCode');
+		const roleName = Local.get('roleName');
+		const roleId = Local.get('roleId');
+		return !roleCode || !roleName || !roleId;
+	} catch {
+		return true;
+	}
+}
+
+/** 角色选择弹框是否已触发（防止多请求同时触发时重复弹出） */
+let roleDialogTriggered = false;
+
+export function isRoleDialogTriggered(): boolean {
+	return roleDialogTriggered;
+}
+
+export function setRoleDialogTriggered(value: boolean): void {
+	roleDialogTriggered = value;
+}

src/views/admin/system/role/changeRole-fir.vue

@@ -21,17 +21,22 @@ import {useMessage} from "/@/hooks/message";
 
 const visible=ref(false)
 const radio=ref('')
-const allRole=reactive([])
+const allRole = reactive<any[]>([])
 const schoolName=ref('')
 
 const open = () => {
-  // handleQuerySchoolName()
   listAllRole().then(res => {
     Object.assign(allRole, res.data)
-    radio.value=Local.get("roleCode")
+    radio.value = Local.get('roleCode')
     visible.value = true
   })
 }
+
+// 必须选择角色后才能关闭，禁止点击遮罩/ESC 关闭（不调用 done 即不关闭）
+const handleBeforeClose = (_done: () => void) => {
+  useMessage().warning('请先选择登录角色')
+}
+
 const handleChangeRole = (label: any) => {
   let obj:any=allRole.find((v:any) => v.roleCode == label)
   Local.set("roleCode",obj.roleCode)