110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
|
import { NavigationFailureType, isNavigationFailure } from 'vue-router';
|
|||
|
|
import NProgress from 'nprogress'; // progress bar
|
|||
|
|
import { LOGIN_NAME, PAGE_NOT_FOUND_NAME, REDIRECT_NAME } from './constant';
|
|||
|
|
import type { WhiteNameList } from './constant';
|
|||
|
|
import type { Router, RouteLocationNormalized } from 'vue-router';
|
|||
|
|
import { useUserStore } from '@/store/modules/user';
|
|||
|
|
import { useKeepAliveStore } from '@/store/modules/keepAlive';
|
|||
|
|
import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum';
|
|||
|
|
import { Storage } from '@/utils/Storage';
|
|||
|
|
import { to as _to } from '@/utils/awaitTo';
|
|||
|
|
|
|||
|
|
NProgress.configure({ showSpinner: false }); // NProgress Configuration
|
|||
|
|
|
|||
|
|
const defaultRoutePath = '/dashboard/welcome';
|
|||
|
|
|
|||
|
|
export function createRouterGuards(router: Router, whiteNameList: WhiteNameList) {
|
|||
|
|
router.beforeEach(async (to, _, next) => {
|
|||
|
|
NProgress.start(); // start progress bar
|
|||
|
|
const userStore = useUserStore();
|
|||
|
|
const token = Storage.get(ACCESS_TOKEN_KEY, null);
|
|||
|
|
|
|||
|
|
if (token) {
|
|||
|
|
if (to.name === LOGIN_NAME) {
|
|||
|
|
next({ path: defaultRoutePath });
|
|||
|
|
} else {
|
|||
|
|
const hasRoute = router.hasRoute(to.name!);
|
|||
|
|
if (userStore.menus.length === 0) {
|
|||
|
|
// 从后台获取菜单
|
|||
|
|
const [err] = await _to(userStore.afterLogin());
|
|||
|
|
if (err) {
|
|||
|
|
userStore.resetToken();
|
|||
|
|
return next({ name: LOGIN_NAME });
|
|||
|
|
}
|
|||
|
|
// 解决警告：No match found for location with path "XXXXXXX"
|
|||
|
|
if (to.name === PAGE_NOT_FOUND_NAME) {
|
|||
|
|
next({ path: to.fullPath, replace: true });
|
|||
|
|
}
|
|||
|
|
// 如果该路由不存在，可能是动态注册的路由，它还没准备好，需要再重定向一次到该路由
|
|||
|
|
else if (!hasRoute) {
|
|||
|
|
next({ ...to, replace: true });
|
|||
|
|
} else {
|
|||
|
|
next();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
next();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// not login
|
|||
|
|
if (whiteNameList.some((n) => n === to.name)) {
|
|||
|
|
// 在免登录名单，直接进入
|
|||
|
|
next();
|
|||
|
|
} else {
|
|||
|
|
next({ name: LOGIN_NAME, query: { redirect: to.fullPath }, replace: true });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** 获取路由对应的组件名称 */
|
|||
|
|
const getComponentName = (route: RouteLocationNormalized) => {
|
|||
|
|
const comp = route.matched.at(-1)?.components?.default;
|
|||
|
|
return comp?.name ?? (comp as any)?.type?.name;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
router.afterEach((to, from, failure) => {
|
|||
|
|
// 跳过自己手动取消路由导航时的错误
|
|||
|
|
if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
|
|||
|
|
NProgress.done();
|
|||
|
|
// console.error('failed navigation', failure);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const keepAliveStore = useKeepAliveStore();
|
|||
|
|
const token = Storage.get(ACCESS_TOKEN_KEY, null);
|
|||
|
|
|
|||
|
|
// 在这里设置需要缓存的组件名称
|
|||
|
|
const toCompName = getComponentName(to);
|
|||
|
|
// 判断当前页面是否开启缓存，如果开启，则将当前页面的 componentName 信息存入 keep-alive 全局状态
|
|||
|
|
if (to.meta?.keepAlive) {
|
|||
|
|
// 需要缓存的组件
|
|||
|
|
if (toCompName) {
|
|||
|
|
keepAliveStore.add(toCompName);
|
|||
|
|
} else {
|
|||
|
|
console.warn(
|
|||
|
|
`${to.fullPath}页面组件的keepAlive为true但未设置组件名，会导致缓存失效，请检查`,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 不需要缓存的组件
|
|||
|
|
if (toCompName) {
|
|||
|
|
keepAliveStore.remove(toCompName);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 如果进入的是 Redirect 页面，则也将离开页面的缓存清空(刷新页面的操作)
|
|||
|
|
if (to.name === REDIRECT_NAME) {
|
|||
|
|
const fromCompName = getComponentName(from);
|
|||
|
|
fromCompName && keepAliveStore.remove(fromCompName);
|
|||
|
|
}
|
|||
|
|
// 如果用户已登出，则清空所有缓存的组件
|
|||
|
|
if (!token) {
|
|||
|
|
keepAliveStore.clear();
|
|||
|
|
}
|
|||
|
|
NProgress.done(); // finish progress bar
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
router.onError((error) => {
|
|||
|
|
console.error('路由错误', error);
|
|||
|
|
});
|
|||
|
|
}
|