index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import { createRouter, createWebHashHistory } from 'vue-router';
  2. import { systemRoutes } from './route';
  3. import { kuky_Authorization } from '../base/storage';
  4. import { initializeRoutes } from '../utils/permission';
  5. const router = createRouter({
  6. history: createWebHashHistory(),
  7. routes: [...systemRoutes],
  8. scrollBehavior: () => ({ left: 0, top: 0 })
  9. });
  10. /**
  11. * 路由验证有三个级别:
  12. * 级别1:任何情况都可进入
  13. * 级别2:在已登录的情况下可以进入
  14. * 级别3:在已登录,并且有权限的情况下可以进入
  15. */
  16. /** 免验证白名单 */
  17. const whiteList = ['/login', '/reg', '/denied', '/'];
  18. /**
  19. * 需要登录的链接
  20. * 这些路由无需权限判断,但是需要用户登录
  21. */
  22. const require_login_paths = [
  23. '/settings',
  24. // '/settings/profile',
  25. '/settings/global',
  26. '/settings/password'
  27. // '/settings/phone',
  28. // '/settings/email'
  29. ];
  30. /** 是否已经生成过路由表 */
  31. let hasRouteFlag = false;
  32. export const resetHasRouteFlag = () => {
  33. hasRouteFlag = false;
  34. };
  35. // 扁平路由表
  36. let flatRoutes = [];
  37. router.beforeEach(async (to, from, next) => {
  38. const isAuthorized = kuky_Authorization.get(); // 获取用户授权状态
  39. const isLoginPage = to.path === '/login'; // 判断目标路径是否为登录页
  40. const isInWhiteList = whiteList.includes(to.path); // 检查目标路径是否在白名单中
  41. const isRequireLoginPath = require_login_paths.includes(to.path); // 检查目标路径是否在白名单中
  42. // 用户已授权的情况
  43. if (isAuthorized) {
  44. // 用户已登录
  45. // 判断动态路由表是否已经生成,若未生成,则生成动态路由表
  46. if (!hasRouteFlag) {
  47. // 路由表未生成,开始生成路由表,并进入目标路由
  48. const { accessRoutes, accessFlatRoutes, firstAccessibleRoute } = await initializeRoutes();
  49. accessRoutes.forEach((route) => {
  50. if (route.path && route.component) {
  51. router.addRoute(route); // 动态添加可访问路由表
  52. }
  53. });
  54. flatRoutes = accessFlatRoutes;
  55. hasRouteFlag = true;
  56. // 路由表已经生成
  57. // next({ path: firstAccessibleRoute.path, replace: true });
  58. next({
  59. path: to.path,
  60. replace: true
  61. });
  62. return;
  63. } else {
  64. // 动态路由表已经生成,根据情况判断是否进入目标路由
  65. }
  66. /**
  67. * 判断当前目标路由位置
  68. * 如果是登录页面,则重定向到首页
  69. * 如果是需要登录的页面,则直接进入
  70. * 其他情况1: 按断是否有权限进入,如果没有权限,则重定向到无权限页面
  71. */
  72. const has_permission = flatRoutes.some((route) => route.path == to.path);
  73. if (isLoginPage) {
  74. // 登录页面:重定向到首页
  75. next('/');
  76. } else if (isRequireLoginPath) {
  77. // 需要登录的页面:直接进入
  78. next();
  79. } else if (!has_permission && !isInWhiteList) {
  80. next('/denied'); // 如果用户无访问权限且不在白名单中,重定向到无权限页面
  81. } else {
  82. next(); // 其他情况,正常访问
  83. }
  84. } else {
  85. if (isRequireLoginPath) {
  86. // 需要用户登录
  87. next('/login');
  88. } else {
  89. // 无需登录的页面
  90. // 用户未授权的情况
  91. if (isInWhiteList) {
  92. // 如果目标路径在免登录白名单中
  93. next(); // 允许进入
  94. } else {
  95. next('/login'); // 否则重定向到登录页面
  96. }
  97. }
  98. }
  99. });
  100. export default router;