fix: 修复退出跳错域、二级页高亮与落地页权限口径
build / build (push) Successful in 5m3s

- host.config:新增④按站推导 ssoHost(base.* → sso.*),logout 加空值保护,修线上退出落到 base 域

- layout:记 lastMenuPage,二级页高亮跟随来源节点并自动展开所在分组(expandToActive)

- App.vue:权限口径=入口页(菜单节点)∪落地页(meta.parentId),落地页一律放行只谈高亮;initShell 首行 await router.isReady() 修深链接竞态

- routes:/signups 补 meta.parentId,修「报名情况不让点」(落地页漏声明会被当入口拦)

- menuRoute:抽 flattenMenuNodes / firstMenuPath 共用口径
This commit is contained in:
lijing
2026-09-21 10:48:13 +08:00
parent 66ad7fc6c3
commit a9ba1281c2
6 changed files with 272 additions and 63 deletions
+92 -15
View File
@@ -4,7 +4,8 @@ import layout from "./components/layout.vue";
import { useRoute, useRouter } from "vue-router";
import config from "@/assets/config/host.config";
import { baseApi } from "@/api/module/activity";
import { resolveMenuPage } from "@/utils/menuRoute";
import { normalizeModList, flattenMenuNodes, firstMenuPath } from "@/utils/menuRoute";
import routes from "@/router/routes";
import { Message } from "view-ui-plus";
const router = useRouter();
@@ -45,8 +46,89 @@ function roleOfPath(p: string): "teacher" | "parent" {
return "teacher";
}
/* ============================================================================
* 路由权限:左侧菜单管「入口」,不管「点进去之后」
* ----------------------------------------------------------------------------
* 两类页面,两套口径:
*
* ① **入口页**(左侧菜单里的节点:我发布的 / 全部活动 / 活动统计 / 应用设置 /
* 家长端各页)→ 必须配在 GetUserMod 里才放行。菜单就是入口清单,
* 没配的入口不该被 URL 直接打开(否则左边栏一片失选,用户以为系统坏了)。
*
* ② **落地页**(从页面上点进去的二级目录:发布活动 / 活动详情 / 报名情况)
* → **一律放行,不判任何权限**。它们不是目录,左侧栏只负责高亮
* 「是从哪个入口节点点进来的」。
*
* 落地页的判定不看"它在没在菜单里",而是看路由表里是否声明了 meta.parentId
* —— 这是"我从哪个入口进来"的显式契约。**踩过的坑**:/signups(报名情况)
* 既能从左侧菜单进、也能从活动列表行操作进,之前没声明 parentId,于是被当成
* ① 类入口去判权限,真实环境账号菜单里没配「报名情况」→ 点按钮直接被弹回第一个
* 节点(用户报"报名情况不让点")。凡是能从页面内点进去的路由,必须在
* routes.ts 声明 meta.parentId,否则会被当成入口被拦。
*
* 左侧菜单(allowedPaths)之外的路由,只有两类能进来:声明了 parentId 的落地页,
* 以及……没有第三种 —— 其余一律落第一个节点。
* ========================================================================== */
/** 菜单是否已就绪。加载期间一律放行,等菜单到达后由下方 watch 复核,
* 否则首屏会因为"菜单还没到"把正常页面误判成无权 */
const menuReady = ref(false);
const normalizedMenu = computed(() => normalizeModList(layoutData.modList));
const menuNodes = computed(() => flattenMenuNodes(normalizedMenu.value));
/** 当前用户可访问的 route.path 集合:菜单入口 ∪ 全部落地页 */
const allowedPaths = computed(() => {
const allow = new Set<string>();
// ① 入口页:菜单里配了才放行
menuNodes.value.forEach((n: any) => {
if (n.page) allow.add(n.page);
});
// ② 落地页:声明了 meta.parentId 的一律放行(点进去的二级目录不判权限)
routes.forEach((r: any) => {
if (r.redirect) return; // 别名由 vue-router 先解析到真实路由,守卫看到的是目标 path
if ((r.meta as any)?.parentId != null) allow.add(r.path);
});
return allow;
});
/** 无权/无匹配时落地的第一个菜单页面(与 initShell 的登录落地规则一致) */
const firstPath = computed(() => firstMenuPath(normalizedMenu.value));
/** 菜单为空视为"降级/加载失败",不拦路由,避免把用户困在死循环重定向里 */
const guardActive = computed(() => menuReady.value && allowedPaths.value.size > 0);
const routeAllowed = computed(() => !guardActive.value || allowedPaths.value.has(route.path));
router.beforeEach((to) => {
if (!guardActive.value) return true;
if (allowedPaths.value.has(to.path)) return true;
const first = firstPath.value;
if (!first || first === to.path) return false; // 没有可用目标:直接不渲染,好过显示无权页
Message.warning(`当前账号没有「${(to.meta as any)?.title || to.path}」的权限,已回到第一个可用页面`);
return { path: first, replace: true };
});
/* 首屏 URL 直达无权页的场景:守卫在菜单未就绪时放行了,菜单到达后必须复核并纠正 */
watch(guardActive, () => {
if (!guardActive.value) return;
if (routeAllowed.value) return;
const first = firstPath.value;
if (first && first !== route.path) router.replace(first);
});
async function initShell() {
/* ★ 必须先等 router 的首次导航解析完成。
main.ts 里是同步 app.mount(),App 的 onMounted 有机会早于 vue-router 的
初始导航 —— 此时 router.currentRoute 还停在 START_LOCATION(path === "/"),
于是「深链接」会被整片误判成"访问应用入口":
· 冷启动 /#/setting、/#/list/new、/#/list/detail 一律被 replace 到第一个节点
(实测原版行为:/#/activitylist、/#/setting 冷启动全部落到 /#/list);
· 家长端 URL 的 role 也会被判成教师端,导致视角与菜单都错。
等 isReady 之后再读 route,上述判断才基于真实目标。 */
await router.isReady();
const role = roleOfPath(router.currentRoute.value.path);
menuReady.value = false; // 重新拉菜单期间不拦路由,避免用上一个角色的菜单误判
try {
// 端分离:先切换 mock 当前视角,再拉身份与菜单
await baseApi.setRole(role).send();
@@ -80,28 +162,21 @@ async function initShell() {
const hasChildren = (modList || []).some((m: any) => m.children && m.children.length > 0);
layoutData.isAlone = (modList || []).length <= 1 && !hasChildren;
menuReady.value = true;
isLogin.value = true;
// 登录后跳转第一个可用模块("/" 本身即我发布的页,无需跳转)
if (router.currentRoute.value.path === "/") {
const firstModule = (modList || [])[0];
const firstRaw = firstModule?.children?.length
? firstModule.children[0]
: firstModule;
const first = resolveMenuPage(firstRaw?.page, firstRaw?.modId ?? firstRaw?.id, firstRaw?.name);
if (!first.external && first.path && first.path !== "/") {
router.replace(first.path);
}
}
// 注:不再有「path === "/" 就跳第一个节点」的分支 —— 入口地址由路由表的
// "/" → "/list" 重定向处理(router.isReady 之前读 currentRoute 会踩上面那个坑),
// 「当前路由没有对应菜单节点 → 落第一个节点」统一交给守卫与下方复核处理。
} catch (error: any) {
console.error("加载用户信息失败", error);
if (error?.message !== "redirect") {
Message.error("载入用户信息失败,请检查后端服务是否正常!");
}
// 降级:使用默认值("/" 即我发布的页,无需跳转)
// 降级:使用默认值("/" 即我发布的页,无需跳转);modList 为空 → 守卫自动失效
layoutData.userInfo = { name: "管理员", avatar: "" };
layoutData.modList = [];
layoutData.isAlone = true;
menuReady.value = true;
isLogin.value = true;
}
}
@@ -121,7 +196,9 @@ watch(
<layout v-if="isLogin" :layoutData="layoutData" />
<div v-if="isLogin" class="base-wrap-main" :class="{ 'alone-page': layoutData.isAlone }">
<div class="main-wrapper">
<router-view v-slot="{ Component }">
<!-- routeAllowed:当前账号菜单里没有该路由时不渲染内容(守卫已拦,这里兜住
「菜单晚于路由到达」的瞬间,避免无权页闪一下再被 replace 掉) -->
<router-view v-if="routeAllowed" v-slot="{ Component }">
<component :is="Component" :key="viewKey" />
</router-view>
</div>