index.ts 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import {createRouter, createWebHashHistory} from 'vue-router';
  2. import NProgress from 'nprogress';
  3. import 'nprogress/nprogress.css';
  4. import pinia from '/@/stores/index';
  5. import {storeToRefs} from 'pinia';
  6. import {useKeepALiveNames} from '/@/stores/keepAliveNames';
  7. import {useRoutesList} from '/@/stores/routesList';
  8. import {useThemeConfig} from '/@/stores/themeConfig';
  9. import {Session} from '/@/utils/storage';
  10. import {dynamicRoutes, notFoundAndNoPower, staticRoutes} from '/@/router/route';
  11. import {initFrontEndControlRoutes} from '/@/router/frontEnd';
  12. import {initBackEndControlRoutes, setRouters} from '/@/router/backEnd';
  13. import {useFrontendMenuStore} from "/@/stores/frontendMenu";
  14. import {useTagsViewRoutes} from "/@/stores/tagsViewRoutes";
  15. import {toRaw} from "vue";
  16. import {checkVersion} from "/@/utils/upgrade";
  17. /**
  18. * 1、前端控制路由时:isRequestRoutes 为 false,需要写 roles,需要走 setFilterRoute 方法。
  19. * 2、后端控制路由时:isRequestRoutes 为 true,不需要写 roles,不需要走 setFilterRoute 方法),
  20. * 相关方法已拆解到对应的 `backEnd.ts` 与 `frontEnd.ts`(他们互不影响,不需要同时改 2 个文件)。
  21. * 特别说明:
  22. * 1、前端控制:路由菜单由前端去写(无菜单管理界面,有角色管理界面),角色管理中有 roles 属性,需返回到 userInfo 中。
  23. * 2、后端控制:路由菜单由后端返回(有菜单管理界面、有角色管理界面)
  24. */
  25. // 读取 `/src/stores/themeConfig.ts` 是否开启后端控制路由配置
  26. const storesThemeConfig = useThemeConfig(pinia);
  27. const {themeConfig} = storeToRefs(storesThemeConfig);
  28. const {isRequestRoutes} = themeConfig.value;
  29. import {useUserInfo} from "/@/stores/userInfo";
  30. const { userInfos } = storeToRefs(useUserInfo());
  31. /**
  32. * 创建一个可以被 Vue 应用程序使用的路由实例
  33. * @method createRouter(options: RouterOptions): Router
  34. * @link 参考:https://next.router.vuejs.org/zh/api/#createrouter
  35. */
  36. export const router = createRouter({
  37. history: createWebHashHistory(),
  38. /**
  39. * 说明:
  40. * 1、notFoundAndNoPower 默认添加 404、401 界面,防止一直提示 No match found for location with path 'xxx'
  41. * 2、backEnd.ts(后端控制路由)、frontEnd.ts(前端控制路由) 中也需要加 notFoundAndNoPower 404、401 界面。
  42. * 防止 404、401 不在 layout 布局中,不设置的话,404、401 界面将全屏显示
  43. */
  44. routes: [...notFoundAndNoPower, ...staticRoutes]
  45. });
  46. /**
  47. * 路由多级嵌套数组处理成一维数组
  48. * @param arr 传入路由菜单数据数组
  49. * @returns 返回处理后的一维路由菜单数组
  50. */
  51. export function formatFlatteningRoutes(arr: any) {
  52. if (arr.length <= 0) return false;
  53. for (let i = 0; i < arr.length; i++) {
  54. if (arr[i].children) {
  55. arr = arr.slice(0, i + 1).concat(arr[i].children, arr.slice(i + 1));
  56. }
  57. }
  58. return arr;
  59. }
  60. /**
  61. * 一维数组处理成多级嵌套数组(只保留二级:也就是二级以上全部处理成只有二级,keep-alive 支持二级缓存)
  62. * @description isKeepAlive 处理 `name` 值,进行缓存。顶级关闭,全部不缓存
  63. * @link 参考:https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive
  64. * @param arr 处理后的一维路由菜单数组
  65. * @returns 返回将一维数组重新处理成 `定义动态路由(dynamicRoutes)` 的格式
  66. */
  67. export function formatTwoStageRoutes(arr: any) {
  68. if (arr.length <= 0) return false;
  69. const newArr: any = [];
  70. const cacheList: Array<string> = [];
  71. arr.forEach((v: any) => {
  72. if (v.path === '/') {
  73. newArr.push({component: v.component,name: v.name,path: v.path,redirect: v.redirect,meta: v.meta,children: []});
  74. } else {
  75. // 判断是否是动态路由(xx/:id/:name),用于 tagsView 等中使用
  76. // 修复:https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
  77. if (v.path.indexOf('/:') > -1) {
  78. v.meta['isDynamic'] = true;
  79. v.meta['isDynamicPath'] = v.path;
  80. }
  81. newArr[0].children.push({...v});
  82. // 存 name 值,keep-alive 中 include 使用,实现路由的缓存
  83. // 路径:/@/layout/routerView/parent.vue
  84. if (newArr[0].meta.isKeepAlive && v.meta.isKeepAlive && v.component_name != "") {
  85. cacheList.push(v.name);
  86. const stores = useKeepALiveNames(pinia);
  87. stores.setCacheKeepAlive(cacheList);
  88. }
  89. }
  90. });
  91. return newArr;
  92. }
  93. const frameOutRoutes = staticRoutes.map(item => item.path)
  94. // 路由加载前
  95. router.beforeEach(async (to, from, next) => {
  96. // 检查浏览器本地版本与线上版本是否一致,判断是否需要刷新页面进行更新
  97. await checkVersion()
  98. NProgress.configure({showSpinner: false});
  99. if (to.meta.title) NProgress.start();
  100. const token = Session.get('token');
  101. if (to.path === '/login'|| to.path === '/superlogin' && !token) {
  102. next();
  103. NProgress.done();
  104. } else {
  105. if (!token) {
  106. next(`/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)}`);
  107. Session.clear();
  108. NProgress.done();
  109. }else if (token && to.path === '/login' && userInfos.value.pwd_change_count===0 ) {
  110. next('/login');
  111. NProgress.done();
  112. } else if (token && to.path === '/login' && userInfos.value.pwd_change_count>0) {
  113. next('/home');
  114. NProgress.done();
  115. }else if(token && frameOutRoutes.includes(to.path) ){
  116. next()
  117. } else {
  118. const storesRoutesList = useRoutesList(pinia);
  119. const {routesList} = storeToRefs(storesRoutesList);
  120. if (routesList.value.length === 0) {
  121. if (isRequestRoutes) {
  122. // 后端控制路由:路由数据初始化,防止刷新时丢失
  123. await initBackEndControlRoutes();
  124. // 解决刷新时,一直跳 404 页面问题,关联问题 No match found for location with path 'xxx'
  125. // to.query 防止页面刷新时,普通路由带参数时,参数丢失。动态路由(xxx/:id/:name")isDynamic 无需处理
  126. next({ path: to.path, query: to.query });
  127. } else {
  128. // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
  129. await initFrontEndControlRoutes();
  130. next({ path: to.path, query: to.query });
  131. }
  132. } else {
  133. next();
  134. }
  135. }
  136. }
  137. });
  138. // 路由加载后
  139. router.afterEach(() => {
  140. NProgress.done();
  141. });
  142. // 导出路由
  143. export default router;