import router from './router' import { useAppStoreWithOut } from '@/store/modules/app' import type { RouteRecordRaw } from 'vue-router' import { useTitle } from '@/hooks/web/useTitle' import { useNProgress } from '@/hooks/web/useNProgress' import { usePermissionStoreWithOut } from '@/store/modules/permission' import { usePageLoading } from '@/hooks/web/usePageLoading' import { NO_REDIRECT_WHITE_LIST } from '@/constants' import { useUserStoreWithOut } from '@/store/modules/user' import { getMyMenus } from '@/api/permission' import { isRealRoute } from '@/utils/routerHelper' const { start, done } = useNProgress() const { loadStart, loadDone } = usePageLoading() // 默认落地页 = 超管分配的第一个菜单页;只认「真能解析出路由」的路径,避免菜单表里失效路径导致 404 const firstMenuPath = (paths?: unknown) => ((paths as string[]) || []).find((p) => { if (typeof p !== 'string' || !p.includes('/index')) return false const matched = router.resolve(p).matched return matched.length > 0 && !matched.some((m) => m.name === '404Page') }) as string | undefined router.beforeEach(async (to, from, next) => { start() loadStart() const permissionStore = usePermissionStoreWithOut() const appStore = useAppStoreWithOut() const userStore = useUserStoreWithOut() console.log( '[permission] to.path=', to.path, 'to.matched=', to.matched.length, 'isAddRouters=', permissionStore.getIsAddRouters, 'hasUser=', !!userStore.getUserInfo ) if (userStore.getUserInfo) { if (to.path === '/login') { next({ path: firstMenuPath(userStore.getRoleRouters) || '/' }) } else { if (permissionStore.getIsAddRouters) { next() return } // 每次路由初始化时从后端实时获取最新菜单权限 let roleRouters: string[] = [] try { const res = (await getMyMenus()) as any if (res && res.data && res.data.length > 0) { roleRouters = res.data userStore.setRoleRouters(roleRouters) } } catch (e) { // 接口失败时回退使用缓存 roleRouters = (userStore.getRoleRouters as string[]) || [] } // 是否使用动态路由 if (appStore.getDynamicRouter) { appStore.serverDynamicRouter ? await permissionStore.generateRoutes( 'server', roleRouters as unknown as AppCustomRouteRecordRaw[] ) : await permissionStore.generateRoutes('frontEnd', roleRouters as string[]) } else { await permissionStore.generateRoutes('static') } permissionStore.getAddRouters.forEach((route) => { router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表 }) console.log( '[permission] roleRouters=', roleRouters, 'addRouters=', permissionStore.getAddRouters.map((r: any) => r.path) ) const redirectPath = from.query.redirect || to.path const redirect = decodeURIComponent(redirectPath as string) // 过滤掉兜底 404 路由 const realRoutes = permissionStore.getAddRouters.filter( (r) => r.path !== '/:path(.*)*' && r.name !== '404Page' ) const firstRoute = realRoutes[0] const firstPath = firstMenuPath(roleRouters) || firstRoute?.path || '/' // 只有真能解析出路由的 redirect 才作数,否则落到第一个可用菜单页。 // 旧写法会把 redirect(例如强制登出时留在 URL 上的 /404)原样 next(),直接撞 404 兜底。 const finalPath = isRealRoute(router, redirect) ? redirect : firstPath const nextData = to.path === finalPath ? { ...to, replace: true } : { path: finalPath } console.log( '[permission] redirect=', redirect, 'firstPath=', firstPath, 'finalPath=', finalPath ) permissionStore.setIsAddRouters(true) next(nextData) } } else { if (NO_REDIRECT_WHITE_LIST.indexOf(to.path) !== -1) { next() } else { // 未登录:'/404' 这种本身就不该存在的路径不要写进 redirect,否则登录后又被跳回 404 next(to.path === '/404' || to.name === '404Page' ? '/login' : `/login?redirect=${to.path}`) } } }) router.afterEach((to) => { useTitle(to?.meta?.title as string) done() // 结束Progress loadDone() })