Mars3D-screen_web/src/routers/index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import { Global3DStore } from "@/stores";
import { AuthStore } from "@/stores/modules/auth";
import { LOGIN_URL, ROUTER_WHITE_LIST } from "@/config/config";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import { staticRouter, errorRouter } from "@/routers/modules/staticRouter";
import NProgress from "@/config/nprogress";
import { HOME_URL } from "@/enums/Home";
import { loginOutsideApi } from "@/api/modules/login";
import { TabsStore } from "@/stores/modules/tabs";
import { KeepAliveStore } from "@/stores/modules/keepAlive";
// import path from "path";

/**
 * @description 动态路由参数配置简介 📚
 * @param path ==> 菜单路径
 * @param name ==> 菜单别名
 * @param redirect ==> 重定向地址
 * @param component ==> 视图文件路径
 * @param meta ==> 菜单信息
 * @param meta.icon ==> 菜单图标
 * @param meta.title ==> 菜单标题
 * @param meta.activeMenu ==> 当前路由为详情页时，需要高亮的菜单
 * @param meta.isLink ==> 是否外链
 * @param meta.isHide ==> 是否隐藏
 * @param meta.isFull ==> 是否全屏(示例：数据大屏页面)
 * @param meta.isAffix ==> 是否固定在 tabs nav
 * @param meta.isKeepAlive ==> 是否缓存
 * */
const router = createRouter({
	history: createWebHashHistory(),
	routes: [...staticRouter, ...errorRouter],
	strict: false,
	scrollBehavior: () => ({ left: 0, top: 0 })
});

/**
 * @description 路由拦截 beforeEach
 * */
router.beforeEach(async (to, from, next) => {
	const globalStore = Global3DStore();
	// 1.NProgress 开始
	NProgress.start();

	// 2.动态设置标题
	const title = import.meta.env.VITE_GLOB_APP_TITLE;
	// document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
	document.title = to.meta.title ? `${to.meta.title} ` : title;
	// 附加.判断是否特殊进入，是的话则默认登录
	if (to.query.projectId) {
		await defaultLogin(to.query.projectId);
	}
	// 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由并放行到登陆页
	if (to.path === LOGIN_URL) {
		if (globalStore.token) return next(from.fullPath);
		resetRouter();
		return next();
	}

	// 4.判断访问页面是否在路由白名单地址中，如果存在直接放行
	if (ROUTER_WHITE_LIST.includes(to.path)) return next();

	// 5.判断是否有 Token，没有重定向到 login
	if (!globalStore.token) return next({ path: LOGIN_URL, replace: true });

	// 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由
	const authStore = AuthStore();
	authStore.setRouteName(to.name as string);
	if (!authStore.authMenuListGet.length) {
		await initDynamicRouter();
		if (globalStore.accountType && globalStore.accountType !== 1 && to.fullPath === HOME_URL[0]) {
			next(HOME_URL[globalStore.accountType - 1]);
		}
		return next({ ...to, replace: true });
	}

	// 7.正常访问页面
	next();
});

/**
 * @description 特殊路由自动登录
 * */
export const defaultLogin = async (id: any) => {
	const { result } = await loginOutsideApi({ projectId: id });
	const globalStore = Global3DStore();
	const tabsStore = TabsStore();
	const keepAlive = KeepAliveStore();
	console.log(result);
	globalStore.setUserInfo(result);
	globalStore.setToken(result.token);
	globalStore.setAccount(result.account);
	globalStore.setAccountType(result.accountType);
	globalStore.setProjectDateAuth(result.projectDateAuth);
	globalStore.setIsManager(result.isManager); //我已知晓

	// 2.添加动态路由
	// await initDynamicRouter();
	// router.push(arr[result.accountType - 1]);
	// 3.清空 tabs、keepAlive 保留的数据
	tabsStore.closeMultipleTab();
	keepAlive.setKeepAliveName();
};

/**
 * @description 重置路由
 * */
export const resetRouter = () => {
	const authStore = AuthStore();
	authStore.flatMenuListGet.forEach(route => {
		const { name } = route;
		if (name && router.hasRoute(name)) router.removeRoute(name);
	});
};

/**
 * @description 路由跳转结束
 * */
router.afterEach(() => {
	NProgress.done();
});

/**
 * @description 路由跳转错误
 * */
router.onError(error => {
	NProgress.done();
	console.warn("路由错误", error.message);
});

export default router;