初始化
This commit is contained in:
103
frontend/src/routers/index.ts
Normal file
103
frontend/src/routers/index.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useAuthStore } from '@/stores/modules/auth'
|
||||
import { useHomeStore } from '@/stores/modules/home'
|
||||
import { LOGIN_URL, ROUTER_WHITE_LIST } from '@/config'
|
||||
import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
|
||||
import { staticRouter } from '@/routers/modules/staticRouter'
|
||||
import NProgress from '@/config/nprogress'
|
||||
import { createHomeMenuMap, getHomeValidPaths, HOME_EXCLUDED_PATHS } from '@/utils/home'
|
||||
|
||||
const WHITE_LIST_SET = new Set(ROUTER_WHITE_LIST)
|
||||
const mode = import.meta.env.VITE_ROUTER_MODE
|
||||
|
||||
const routerMode = {
|
||||
hash: () => createWebHashHistory(),
|
||||
history: () => createWebHistory()
|
||||
}
|
||||
|
||||
const router = createRouter({
|
||||
history: routerMode[mode]?.() || createWebHashHistory(),
|
||||
routes: [...staticRouter],
|
||||
strict: false,
|
||||
scrollBehavior: () => ({ left: 0, top: 0 })
|
||||
})
|
||||
|
||||
const syncHomeStateWithMenus = () => {
|
||||
const authStore = useAuthStore()
|
||||
const homeStore = useHomeStore()
|
||||
homeStore.syncWithMenus(getHomeValidPaths(authStore.flatMenuListGet))
|
||||
}
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const userStore = useUserStore()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
NProgress.start()
|
||||
|
||||
const title = import.meta.env.VITE_GLOB_APP_TITLE
|
||||
document.title = to.meta.title ? `${to.meta.title} - ${title}` : title
|
||||
|
||||
if (to.path.toLocaleLowerCase() === LOGIN_URL) {
|
||||
if (userStore.accessToken) {
|
||||
return next('/')
|
||||
}
|
||||
|
||||
resetRouter()
|
||||
return next()
|
||||
}
|
||||
|
||||
if (WHITE_LIST_SET.has(to.path)) return next()
|
||||
|
||||
if (!userStore.accessToken) return next({ path: LOGIN_URL, replace: true })
|
||||
|
||||
if (!authStore.authMenuListGet.length) {
|
||||
try {
|
||||
await initDynamicRouter()
|
||||
syncHomeStateWithMenus()
|
||||
return next({ ...to, replace: true })
|
||||
} catch (error) {
|
||||
console.error('Dynamic router initialization failed', error)
|
||||
await userStore.logout()
|
||||
return next({ path: LOGIN_URL, replace: true })
|
||||
}
|
||||
}
|
||||
|
||||
syncHomeStateWithMenus()
|
||||
await authStore.setRouteName(to.name as string)
|
||||
|
||||
if (!authStore.activateInfoLoadedGet) {
|
||||
await authStore.setActivateInfo()
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
export const resetRouter = () => {
|
||||
const authStore = useAuthStore()
|
||||
authStore.flatMenuListGet.forEach(route => {
|
||||
const { name } = route
|
||||
if (name && router.hasRoute(name)) router.removeRoute(name)
|
||||
})
|
||||
}
|
||||
|
||||
router.onError(error => {
|
||||
NProgress.done()
|
||||
console.warn('Route error', error.message)
|
||||
})
|
||||
|
||||
router.afterEach(to => {
|
||||
NProgress.done()
|
||||
|
||||
if (HOME_EXCLUDED_PATHS.has(to.path)) return
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const homeStore = useHomeStore()
|
||||
const menuMap = createHomeMenuMap(authStore.flatMenuListGet)
|
||||
|
||||
if (!menuMap[to.path]) return
|
||||
|
||||
homeStore.addRecentVisited(to.path)
|
||||
})
|
||||
|
||||
export default router
|
||||
118
frontend/src/routers/modules/dynamicRouter.ts
Normal file
118
frontend/src/routers/modules/dynamicRouter.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import router from '@/routers'
|
||||
import { LOGIN_URL } from '@/config'
|
||||
import { type RouteRecordRaw } from 'vue-router'
|
||||
import { ElNotification } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useAuthStore } from '@/stores/modules/auth'
|
||||
|
||||
// 引入 views 文件夹下所有 vue 文件
|
||||
const modules = import.meta.glob('@/views/**/*.vue')
|
||||
const STATIC_ROUTE_NAMES = new Set(['layout', 'login', 'home', '403', '404', '500'])
|
||||
|
||||
let isInitializing = false
|
||||
|
||||
/**
|
||||
* 清除已有的动态路由
|
||||
*/
|
||||
const clearDynamicRoutes = () => {
|
||||
const routes = router.getRoutes()
|
||||
routes.forEach(route => {
|
||||
if (route.name && !STATIC_ROUTE_NAMES.has(String(route.name))) {
|
||||
router.removeRoute(route.name)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 component 路径查找对应的模块
|
||||
* @param path 组件路径
|
||||
*/
|
||||
const resolveComponentModule = async (path: string) => {
|
||||
// 规范化路径，去除首尾斜杠
|
||||
let normalizedPath = path.trim()
|
||||
if (!normalizedPath.startsWith('/')) {
|
||||
normalizedPath = '/' + normalizedPath
|
||||
}
|
||||
if (normalizedPath.endsWith('.vue')) {
|
||||
normalizedPath = normalizedPath.slice(0, -4)
|
||||
}
|
||||
|
||||
const fullPath = `/src/views${normalizedPath}.vue`
|
||||
return modules[fullPath]
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 初始化动态路由
|
||||
*/
|
||||
export const initDynamicRouter = async () => {
|
||||
if (isInitializing) return Promise.reject(new Error('Dynamic router initialization in progress'))
|
||||
|
||||
isInitializing = true
|
||||
const userStore = useUserStore()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
try {
|
||||
// 1. 获取菜单列表 && 按钮权限列表
|
||||
await authStore.getAuthMenuList()
|
||||
await authStore.getAuthButtonList()
|
||||
|
||||
// 2. 判断当前用户有没有菜单权限
|
||||
if (!authStore.authMenuListGet.length) {
|
||||
ElNotification({
|
||||
title: '无权限访问',
|
||||
message: '当前账号无任何菜单权限，请联系系统管理员！',
|
||||
type: 'warning',
|
||||
duration: 3000
|
||||
})
|
||||
userStore.setAccessToken('')
|
||||
userStore.setRefreshToken('')
|
||||
userStore.setExp(0)
|
||||
await router.replace(LOGIN_URL)
|
||||
return Promise.reject('No permission')
|
||||
}
|
||||
|
||||
// 3. 清理之前的动态路由
|
||||
clearDynamicRoutes()
|
||||
|
||||
// 4. 添加动态路由
|
||||
for (const item of authStore.flatMenuListGet) {
|
||||
// 删除 children 避免冗余嵌套
|
||||
if (item.children) delete item.children
|
||||
|
||||
// 处理组件映射
|
||||
if (item.component && typeof item.component === 'string') {
|
||||
const moduleLoader = await resolveComponentModule(item.component)
|
||||
if (moduleLoader) {
|
||||
item.component = moduleLoader
|
||||
} else {
|
||||
console.warn(`未能找到组件: ${item.component}`)
|
||||
continue
|
||||
}
|
||||
}
|
||||
|
||||
// 类型守卫：确保满足 RouteRecordRaw 接口要求
|
||||
if (
|
||||
typeof item.path === 'string' &&
|
||||
(typeof item.component === 'function' || typeof item.redirect === 'string')
|
||||
) {
|
||||
const routeItem = item as unknown as RouteRecordRaw
|
||||
if (item.meta.isFull) {
|
||||
router.addRoute(routeItem)
|
||||
} else {
|
||||
router.addRoute('layout', routeItem)
|
||||
}
|
||||
} else {
|
||||
console.warn('Invalid route item:', item)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// 当按钮 || 菜单请求出错时，重定向到登陆页
|
||||
userStore.setAccessToken('')
|
||||
userStore.setRefreshToken('')
|
||||
userStore.setExp(0)
|
||||
await router.replace(LOGIN_URL)
|
||||
return Promise.reject(error)
|
||||
} finally {
|
||||
isInitializing = false
|
||||
}
|
||||
}
|
||||
67
frontend/src/routers/modules/staticRouter.ts
Normal file
67
frontend/src/routers/modules/staticRouter.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import { type RouteRecordRaw } from 'vue-router'
|
||||
import { HOME_URL, LOGIN_URL } from '@/config'
|
||||
|
||||
export const Layout = () => import('@/layouts/index.vue')
|
||||
|
||||
export const staticRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: HOME_URL
|
||||
},
|
||||
{
|
||||
path: LOGIN_URL,
|
||||
name: 'login',
|
||||
component: () => import('@/views/login/index.vue'),
|
||||
meta: {
|
||||
title: 'Login'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/layout',
|
||||
name: 'layout',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: HOME_URL,
|
||||
name: 'home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
meta: {
|
||||
title: '首页',
|
||||
icon: 'HomeFilled',
|
||||
isHide: false,
|
||||
isFull: false,
|
||||
isAffix: true,
|
||||
isKeepAlive: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/403',
|
||||
name: '403',
|
||||
component: () => import('@/components/ErrorMessage/403.vue'),
|
||||
meta: {
|
||||
title: '403'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: '404',
|
||||
component: () => import('@/components/ErrorMessage/404.vue'),
|
||||
meta: {
|
||||
title: '404'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/500',
|
||||
name: '500',
|
||||
component: () => import('@/components/ErrorMessage/500.vue'),
|
||||
meta: {
|
||||
title: '500'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
component: () => import('@/components/ErrorMessage/404.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user