227 lines
7.8 KiB
TypeScript
227 lines
7.8 KiB
TypeScript
|
import type { Router, RouteRecordRaw } from 'vue-router'
|
|||
|
|
import { useNProgress } from '@vueuse/integrations/useNProgress'
|
|||
|
|
import { asyncRoutes, asyncRoutesByFilesystem } from './routes'
|
|||
|
|
import '@/assets/styles/nprogress.css'
|
|||
|
|
|
|||
|
|
function setupRoutes(router: Router) {
|
|||
|
|
router.beforeEach(async (to, _from, next) => {
|
|||
|
|
const settingsStore = useSettingsStore()
|
|||
|
|
const userStore = useUserStore()
|
|||
|
|
const routeStore = useRouteStore()
|
|||
|
|
const menuStore = useMenuStore()
|
|||
|
|
// 是否已登录
|
|||
|
|
if (userStore.isLogin) {
|
|||
|
|
// 是否已根据权限动态生成并注册路由
|
|||
|
|
if (routeStore.isGenerate) {
|
|||
|
|
// 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
|
|||
|
|
settingsStore.settings.menu.mode !== 'single' && menuStore.setActived(to.path)
|
|||
|
|
// 如果已登录状态下，进入登录页会强制跳转到主页
|
|||
|
|
if (to.name === 'login') {
|
|||
|
|
next({
|
|||
|
|
path: settingsStore.settings.home.fullPath,
|
|||
|
|
replace: true,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 如果未开启主页，但进入的是主页，则会进入侧边栏导航第一个模块
|
|||
|
|
else if (!settingsStore.settings.home.enable && to.fullPath === settingsStore.settings.home.fullPath) {
|
|||
|
|
if (menuStore.sidebarMenus.length > 0) {
|
|||
|
|
next({
|
|||
|
|
path: menuStore.sidebarMenusFirstDeepestPath,
|
|||
|
|
replace: true,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 如果侧边栏导航第一个模块均无法命中，则还是进入主页
|
|||
|
|
else {
|
|||
|
|
next()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 正常访问页面
|
|||
|
|
else {
|
|||
|
|
next()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
try {
|
|||
|
|
// 获取用户权限
|
|||
|
|
settingsStore.settings.app.enablePermission && await userStore.getPermissions()
|
|||
|
|
// 生成动态路由
|
|||
|
|
switch (settingsStore.settings.app.routeBaseOn) {
|
|||
|
|
case 'frontend':
|
|||
|
|
routeStore.generateRoutesAtFront(asyncRoutes)
|
|||
|
|
break
|
|||
|
|
case 'backend':
|
|||
|
|
await routeStore.generateRoutesAtBack()
|
|||
|
|
break
|
|||
|
|
case 'filesystem':
|
|||
|
|
routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
|
|||
|
|
// 文件系统生成的路由，需要手动生成导航数据
|
|||
|
|
switch (settingsStore.settings.menu.baseOn) {
|
|||
|
|
case 'frontend':
|
|||
|
|
menuStore.generateMenusAtFront()
|
|||
|
|
break
|
|||
|
|
case 'backend':
|
|||
|
|
await menuStore.generateMenusAtBack()
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
// 注册并记录路由数据
|
|||
|
|
// 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
|
|||
|
|
const removeRoutes: (() => void)[] = []
|
|||
|
|
routeStore.routes.forEach((route) => {
|
|||
|
|
if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
|
|||
|
|
removeRoutes.push(router.addRoute(route as RouteRecordRaw))
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
|
|||
|
|
routeStore.systemRoutes.forEach((route) => {
|
|||
|
|
removeRoutes.push(router.addRoute(route as RouteRecordRaw))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
routeStore.setCurrentRemoveRoutes(removeRoutes)
|
|||
|
|
}
|
|||
|
|
catch {
|
|||
|
|
userStore.logout()
|
|||
|
|
}
|
|||
|
|
// 动态路由生成并注册后，重新进入当前路由
|
|||
|
|
next({
|
|||
|
|
path: to.path,
|
|||
|
|
query: to.query,
|
|||
|
|
replace: true,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if (to.name !== 'login') {
|
|||
|
|
next({
|
|||
|
|
name: 'login',
|
|||
|
|
query: {
|
|||
|
|
redirect: to.fullPath !== settingsStore.settings.home.fullPath ? to.fullPath : undefined,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
next()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 当父级路由未配置重定向时，自动重定向到有访问权限的子路由
|
|||
|
|
function setupRedirectAuthChildrenRoute(router: Router) {
|
|||
|
|
router.beforeEach((to, _from, next) => {
|
|||
|
|
const { auth } = useAuth()
|
|||
|
|
const currentRoute = router.getRoutes().find(route => route.path === (to.matched.at(-1)?.path ?? ''))
|
|||
|
|
if (!currentRoute?.redirect) {
|
|||
|
|
const findAuthRoute = currentRoute?.children?.find(route => route.meta?.menu !== false && auth(route.meta?.auth ?? ''))
|
|||
|
|
if (findAuthRoute) {
|
|||
|
|
next(findAuthRoute)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
next()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
next()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 进度条
|
|||
|
|
function setupProgress(router: Router) {
|
|||
|
|
const { isLoading } = useNProgress()
|
|||
|
|
router.beforeEach((_to, _from, next) => {
|
|||
|
|
const settingsStore = useSettingsStore()
|
|||
|
|
if (settingsStore.settings.app.enableProgress) {
|
|||
|
|
isLoading.value = true
|
|||
|
|
}
|
|||
|
|
next()
|
|||
|
|
})
|
|||
|
|
router.afterEach(() => {
|
|||
|
|
const settingsStore = useSettingsStore()
|
|||
|
|
if (settingsStore.settings.app.enableProgress) {
|
|||
|
|
isLoading.value = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标题
|
|||
|
|
function setupTitle(router: Router) {
|
|||
|
|
router.afterEach((to) => {
|
|||
|
|
const settingsStore = useSettingsStore()
|
|||
|
|
if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
|
|||
|
|
settingsStore.setTitle(to.matched?.at(-1)?.meta?.title ?? to.meta.title)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
settingsStore.setTitle(to.meta.title)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面缓存
|
|||
|
|
function setupKeepAlive(router: Router) {
|
|||
|
|
router.afterEach(async (to, from) => {
|
|||
|
|
const keepAliveStore = useKeepAliveStore()
|
|||
|
|
if (to.fullPath !== from.fullPath) {
|
|||
|
|
if (to.meta.cache) {
|
|||
|
|
const componentName = to.matched.at(-1)?.components?.default.name
|
|||
|
|
if (componentName) {
|
|||
|
|
// 缓存当前页面前，先判断是否需要进行清除缓存，判断依据：
|
|||
|
|
// 1. 如果 to.meta.cache 为 boolean 类型，并且不为 true，则需要清除缓存
|
|||
|
|
// 2. 如果 to.meta.cache 为 string 类型，并且与 from.name 不一致，则需要清除缓存
|
|||
|
|
// 3. 如果 to.meta.cache 为 array 类型，并且不包含 from.name，则需要清除缓存
|
|||
|
|
// 4. 如果 to.meta.noCache 为 string 类型，并且与 from.name 一致，则需要清除缓存
|
|||
|
|
// 5. 如果 to.meta.noCache 为 array 类型，并且包含 from.name，则需要清除缓存
|
|||
|
|
// 6. 如果是刷新页面，则需要清除缓存
|
|||
|
|
let shouldClearCache = false
|
|||
|
|
if (typeof to.meta.cache === 'boolean') {
|
|||
|
|
shouldClearCache = !to.meta.cache
|
|||
|
|
}
|
|||
|
|
else if (typeof to.meta.cache === 'string') {
|
|||
|
|
shouldClearCache = to.meta.cache !== from.name
|
|||
|
|
}
|
|||
|
|
else if (Array.isArray(to.meta.cache)) {
|
|||
|
|
shouldClearCache = !to.meta.cache.includes(from.name as string)
|
|||
|
|
}
|
|||
|
|
if (to.meta.noCache) {
|
|||
|
|
if (typeof to.meta.noCache === 'string') {
|
|||
|
|
shouldClearCache = to.meta.noCache === from.name
|
|||
|
|
}
|
|||
|
|
else if (Array.isArray(to.meta.noCache)) {
|
|||
|
|
shouldClearCache = to.meta.noCache.includes(from.name as string)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (from.name === 'reload') {
|
|||
|
|
shouldClearCache = true
|
|||
|
|
}
|
|||
|
|
if (shouldClearCache) {
|
|||
|
|
keepAliveStore.remove(componentName)
|
|||
|
|
await nextTick()
|
|||
|
|
}
|
|||
|
|
keepAliveStore.add(componentName)
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// turbo-console-disable-next-line
|
|||
|
|
console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 其他
|
|||
|
|
function setupOther(router: Router) {
|
|||
|
|
router.afterEach(() => {
|
|||
|
|
document.documentElement.scrollTop = 0
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function setupGuards(router: Router) {
|
|||
|
|
setupRoutes(router)
|
|||
|
|
setupRedirectAuthChildrenRoute(router)
|
|||
|
|
setupProgress(router)
|
|||
|
|
setupTitle(router)
|
|||
|
|
setupKeepAlive(router)
|
|||
|
|
setupOther(router)
|
|||
|
|
}
|