2022-05-01 11:43:53 +08:00
|
|
|
|
import { createRouter, createWebHashHistory } from 'vue-router';
|
2021-03-15 12:44:58 +08:00
|
|
|
|
import NProgress from 'nprogress';
|
|
|
|
|
import 'nprogress/nprogress.css';
|
2022-04-18 19:14:38 +08:00
|
|
|
|
import pinia from '/@/stores/index';
|
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
|
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
|
|
|
|
|
import { useRoutesList } from '/@/stores/routesList';
|
|
|
|
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
2021-06-19 17:49:42 +08:00
|
|
|
|
import { Session } from '/@/utils/storage';
|
2022-11-16 15:34:23 +08:00
|
|
|
|
import { staticRoutes, notFoundAndNoPower } from '/@/router/route';
|
2021-06-19 17:49:42 +08:00
|
|
|
|
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
|
|
|
|
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
|
|
|
|
|
2022-05-01 11:43:53 +08:00
|
|
|
|
/**
|
|
|
|
|
* 1、前端控制路由时:isRequestRoutes 为 false,需要写 roles,需要走 setFilterRoute 方法。
|
|
|
|
|
* 2、后端控制路由时:isRequestRoutes 为 true,不需要写 roles,不需要走 setFilterRoute 方法),
|
|
|
|
|
* 相关方法已拆解到对应的 `backEnd.ts` 与 `frontEnd.ts`(他们互不影响,不需要同时改 2 个文件)。
|
|
|
|
|
* 特别说明:
|
|
|
|
|
* 1、前端控制:路由菜单由前端去写(无菜单管理界面,有角色管理界面),角色管理中有 roles 属性,需返回到 userInfo 中。
|
|
|
|
|
* 2、后端控制:路由菜单由后端返回(有菜单管理界面、有角色管理界面)
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// 读取 `/src/stores/themeConfig.ts` 是否开启后端控制路由配置
|
|
|
|
|
const storesThemeConfig = useThemeConfig(pinia);
|
|
|
|
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
|
|
const { isRequestRoutes } = themeConfig.value;
|
|
|
|
|
|
2021-06-19 17:49:42 +08:00
|
|
|
|
/**
|
|
|
|
|
* 创建一个可以被 Vue 应用程序使用的路由实例
|
|
|
|
|
* @method createRouter(options: RouterOptions): Router
|
|
|
|
|
* @link 参考:https://next.router.vuejs.org/zh/api/#createrouter
|
|
|
|
|
*/
|
2022-05-01 11:43:53 +08:00
|
|
|
|
export const router = createRouter({
|
2021-03-15 12:44:58 +08:00
|
|
|
|
history: createWebHashHistory(),
|
2022-11-16 15:34:23 +08:00
|
|
|
|
/**
|
|
|
|
|
* 说明:
|
|
|
|
|
* 1、notFoundAndNoPower 默认添加 404、401 界面,防止一直提示 No match found for location with path 'xxx'
|
|
|
|
|
* 2、backEnd.ts(后端控制路由)、frontEnd.ts(前端控制路由) 中也需要加 notFoundAndNoPower 404、401 界面。
|
|
|
|
|
* 防止 404、401 不在 layout 布局中,不设置的话,404、401 界面将全屏显示
|
|
|
|
|
*/
|
|
|
|
|
routes: [...notFoundAndNoPower, ...staticRoutes],
|
2021-03-15 12:44:58 +08:00
|
|
|
|
});
|
2020-12-25 18:15:04 +08:00
|
|
|
|
|
2021-06-19 17:49:42 +08:00
|
|
|
|
/**
|
|
|
|
|
* 路由多级嵌套数组处理成一维数组
|
|
|
|
|
* @param arr 传入路由菜单数据数组
|
|
|
|
|
* @returns 返回处理后的一维路由菜单数组
|
|
|
|
|
*/
|
2021-01-21 18:59:16 +08:00
|
|
|
|
export function formatFlatteningRoutes(arr: any) {
|
2021-04-23 15:30:32 +08:00
|
|
|
|
if (arr.length <= 0) return false;
|
2021-03-15 12:44:58 +08:00
|
|
|
|
for (let i = 0; i < arr.length; i++) {
|
|
|
|
|
if (arr[i].children) {
|
|
|
|
|
arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return arr;
|
2021-01-21 18:59:16 +08:00
|
|
|
|
}
|
|
|
|
|
|
2021-06-19 17:49:42 +08:00
|
|
|
|
/**
|
|
|
|
|
* 一维数组处理成多级嵌套数组(只保留二级:也就是二级以上全部处理成只有二级,keep-alive 支持二级缓存)
|
|
|
|
|
* @description isKeepAlive 处理 `name` 值,进行缓存。顶级关闭,全部不缓存
|
|
|
|
|
* @link 参考:https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
|
|
|
|
|
* @param arr 处理后的一维路由菜单数组
|
|
|
|
|
* @returns 返回将一维数组重新处理成 `定义动态路由(dynamicRoutes)` 的格式
|
|
|
|
|
*/
|
2021-01-21 18:59:16 +08:00
|
|
|
|
export function formatTwoStageRoutes(arr: any) {
|
2021-04-23 15:30:32 +08:00
|
|
|
|
if (arr.length <= 0) return false;
|
2021-03-15 12:44:58 +08:00
|
|
|
|
const newArr: any = [];
|
|
|
|
|
const cacheList: Array<string> = [];
|
2021-03-25 18:07:15 +08:00
|
|
|
|
arr.forEach((v: any) => {
|
2021-03-15 12:44:58 +08:00
|
|
|
|
if (v.path === '/') {
|
|
|
|
|
newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
|
|
|
|
|
} else {
|
2021-07-14 21:02:28 +08:00
|
|
|
|
// 判断是否是动态路由(xx/:id/:name),用于 tagsView 等中使用
|
|
|
|
|
// 修复:https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
|
|
|
|
if (v.path.indexOf('/:') > -1) {
|
|
|
|
|
v.meta['isDynamic'] = true;
|
|
|
|
|
v.meta['isDynamicPath'] = v.path;
|
|
|
|
|
}
|
2021-03-15 12:44:58 +08:00
|
|
|
|
newArr[0].children.push({ ...v });
|
2021-06-19 17:49:42 +08:00
|
|
|
|
// 存 name 值,keep-alive 中 include 使用,实现路由的缓存
|
|
|
|
|
// 路径:/@/layout/routerView/parent.vue
|
2021-03-15 12:44:58 +08:00
|
|
|
|
if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive) {
|
|
|
|
|
cacheList.push(v.name);
|
2022-04-18 19:14:38 +08:00
|
|
|
|
const stores = useKeepALiveNames(pinia);
|
|
|
|
|
stores.setCacheKeepAlive(cacheList);
|
2021-03-15 12:44:58 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return newArr;
|
2021-01-21 18:59:16 +08:00
|
|
|
|
}
|
|
|
|
|
|
2021-01-27 17:54:58 +08:00
|
|
|
|
// 路由加载前
|
2021-06-02 17:16:41 +08:00
|
|
|
|
router.beforeEach(async (to, from, next) => {
|
2021-03-15 12:44:58 +08:00
|
|
|
|
NProgress.configure({ showSpinner: false });
|
|
|
|
|
if (to.meta.title) NProgress.start();
|
2021-06-19 17:49:42 +08:00
|
|
|
|
const token = Session.get('token');
|
2021-03-15 12:44:58 +08:00
|
|
|
|
if (to.path === '/login' && !token) {
|
|
|
|
|
next();
|
|
|
|
|
NProgress.done();
|
|
|
|
|
} else {
|
|
|
|
|
if (!token) {
|
2021-07-16 12:46:26 +08:00
|
|
|
|
next(`/login?redirect=${to.path}¶ms=${JSON.stringify(to.query ? to.query : to.params)}`);
|
2021-06-19 17:49:42 +08:00
|
|
|
|
Session.clear();
|
2021-03-15 12:44:58 +08:00
|
|
|
|
NProgress.done();
|
|
|
|
|
} else if (token && to.path === '/login') {
|
|
|
|
|
next('/home');
|
|
|
|
|
NProgress.done();
|
|
|
|
|
} else {
|
2022-04-18 19:14:38 +08:00
|
|
|
|
const storesRoutesList = useRoutesList(pinia);
|
|
|
|
|
const { routesList } = storeToRefs(storesRoutesList);
|
|
|
|
|
if (routesList.value.length === 0) {
|
2021-06-02 17:16:41 +08:00
|
|
|
|
if (isRequestRoutes) {
|
|
|
|
|
// 后端控制路由:路由数据初始化,防止刷新时丢失
|
2021-06-19 17:49:42 +08:00
|
|
|
|
await initBackEndControlRoutes();
|
2022-11-16 15:34:23 +08:00
|
|
|
|
// 解决刷新时,一直跳 404 页面问题,关联问题 No match found for location with path 'xxx'
|
2022-11-19 00:09:19 +08:00
|
|
|
|
// to.query 防止页面刷新时,普通路由带参数时,参数丢失。动态路由(xxx/:id/:name")isDynamic 无需处理
|
|
|
|
|
next({ path: to.path, query: to.query });
|
2022-07-10 19:37:39 +08:00
|
|
|
|
} else {
|
|
|
|
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
|
|
|
|
|
await initFrontEndControlRoutes();
|
2022-11-19 00:09:19 +08:00
|
|
|
|
next({ path: to.path, query: to.query });
|
2021-06-02 17:16:41 +08:00
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
next();
|
|
|
|
|
}
|
2021-03-15 12:44:58 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-12-31 11:47:52 +08:00
|
|
|
|
|
2021-01-27 17:54:58 +08:00
|
|
|
|
// 路由加载后
|
|
|
|
|
router.afterEach(() => {
|
2021-03-15 12:44:58 +08:00
|
|
|
|
NProgress.done();
|
|
|
|
|
});
|
2020-12-31 11:47:52 +08:00
|
|
|
|
|
2021-01-31 15:47:43 +08:00
|
|
|
|
// 导出路由
|
2021-03-15 12:44:58 +08:00
|
|
|
|
export default router;
|