83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
|
||
import { useNProgress } from '@vueuse/integrations/useNProgress';
|
||
import { createRouter, createWebHistory } from 'vue-router';
|
||
import { ROUTER_WHITE_LIST } from '@/config';
|
||
import { errorRouter, layoutRouter, staticRouter } from '@/routers/modules/staticRouter';
|
||
import { useDesignStore, useUserStore } from '@/stores';
|
||
|
||
const { start, done } = useNProgress(0, {
|
||
showSpinner: false,
|
||
trickleSpeed: 200,
|
||
minimum: 0.3,
|
||
easing: 'ease',
|
||
speed: 500,
|
||
});
|
||
|
||
const router = createRouter({
|
||
history: createWebHistory(),
|
||
routes: [...layoutRouter, ...staticRouter, ...errorRouter],
|
||
strict: false,
|
||
scrollBehavior: () => ({ left: 0, top: 0 }),
|
||
});
|
||
|
||
// 路由前置守卫
|
||
router.beforeEach(
|
||
async (
|
||
to: RouteLocationNormalized,
|
||
_from: RouteLocationNormalized,
|
||
next: NavigationGuardNext,
|
||
) => {
|
||
const userStore = useUserStore();
|
||
const designStore = useDesignStore(); // 必须在守卫内部调用
|
||
designStore._setLayout(to.meta?.layout || 'vertical');
|
||
|
||
// 1、NProgress 开始
|
||
start();
|
||
|
||
// 2、标题
|
||
document.title = (to.meta.title as string) || (import.meta.env.VITE_WEB_TITLE as string);
|
||
|
||
// 3、权限 预留
|
||
// 3、判断是访问登陆页，有Token访问当前页面，token过期访问接口，axios封装则自动跳转登录页面，没有Token重置路由到登陆页。
|
||
// if (to.path.toLocaleLowerCase() === LOGIN_URL) {
|
||
// // 有Token访问当前页面
|
||
// if (userStore.token) {
|
||
// return next(from.fullPath);
|
||
// }
|
||
// else {
|
||
// ElMessage.error('账号身份已过期，请重新登录');
|
||
// }
|
||
// // 没有Token重置路由到登陆页。
|
||
// // resetRouter(); // 预留
|
||
// return next();
|
||
// }
|
||
// 4、判断访问页面是否在路由白名单地址[静态路由]中，如果存在直接放行。
|
||
if (ROUTER_WHITE_LIST.includes(to.path))
|
||
return next();
|
||
|
||
// 5、判断是否有 Token，没有重定向到 login 页面。
|
||
if (!userStore.token)
|
||
userStore.logout();
|
||
|
||
// 其余逻辑 预留...
|
||
|
||
// 6、正常访问页面。
|
||
next();
|
||
},
|
||
);
|
||
|
||
// 路由跳转错误
|
||
router.onError((error) => {
|
||
// 结束全屏动画
|
||
done();
|
||
console.warn('路由错误', error.message);
|
||
});
|
||
|
||
// 后置路由
|
||
router.afterEach(() => {
|
||
// 结束全屏动画
|
||
done();
|
||
});
|
||
|
||
export default router;
|