mirror of
				https://github.com/soybeanjs/soybean-admin.git
				synced 2025-11-04 07:43:42 +08:00 
			
		
		
		
	fix(projects): 修复路由守卫的动态路由逻辑
This commit is contained in:
		
							
								
								
									
										46
									
								
								src/router/guard/dynamic.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										46
									
								
								src/router/guard/dynamic.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,46 @@
 | 
				
			|||||||
 | 
					import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 | 
				
			||||||
 | 
					import { routeName } from '@/router';
 | 
				
			||||||
 | 
					import { useRouteStore } from '@/store';
 | 
				
			||||||
 | 
					import { getToken } from '@/utils';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * 动态路由
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					export async function createDynamicRouteGuard(
 | 
				
			||||||
 | 
					  to: RouteLocationNormalized,
 | 
				
			||||||
 | 
					  _from: RouteLocationNormalized,
 | 
				
			||||||
 | 
					  next: NavigationGuardNext,
 | 
				
			||||||
 | 
					  router: Router
 | 
				
			||||||
 | 
					) {
 | 
				
			||||||
 | 
					  const route = useRouteStore();
 | 
				
			||||||
 | 
					  const isLogin = Boolean(getToken());
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  // 初始化动态路由
 | 
				
			||||||
 | 
					  if (!route.isAddedDynamicRoute) {
 | 
				
			||||||
 | 
					    // 未登录情况下直接回到登录页,登录成功后再加载动态路由
 | 
				
			||||||
 | 
					    if (!isLogin) {
 | 
				
			||||||
 | 
					      if (to.name === routeName('login')) {
 | 
				
			||||||
 | 
					        next();
 | 
				
			||||||
 | 
					      } else {
 | 
				
			||||||
 | 
					        const redirect = to.fullPath;
 | 
				
			||||||
 | 
					        next({ name: routeName('login'), query: { redirect } });
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      return false;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    await route.initDynamicRoute(router);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    if (to.name === routeName('not-found-page')) {
 | 
				
			||||||
 | 
					      // 动态路由没有加载导致被not-found-page路由捕获,等待动态路由加载好了,回到之前的路由
 | 
				
			||||||
 | 
					      next({ path: to.fullPath, replace: true, query: to.query });
 | 
				
			||||||
 | 
					      return false;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    // 动态路由已经加载,仍然未找到,重定向到not-found
 | 
				
			||||||
 | 
					    if (to.name === routeName('not-found-page')) {
 | 
				
			||||||
 | 
					      next({ name: routeName('not-found'), replace: true });
 | 
				
			||||||
 | 
					      return false;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  return true;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@@ -1,6 +1,6 @@
 | 
				
			|||||||
import type { Router } from 'vue-router';
 | 
					import type { Router } from 'vue-router';
 | 
				
			||||||
import { useTitle } from '@vueuse/core';
 | 
					import { useTitle } from '@vueuse/core';
 | 
				
			||||||
import { handlePagePermission } from './permission';
 | 
					import { createPermissionGuard } from './permission';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/**
 | 
					/**
 | 
				
			||||||
 * 路由守卫函数
 | 
					 * 路由守卫函数
 | 
				
			||||||
@@ -11,7 +11,7 @@ export function createRouterGuard(router: Router) {
 | 
				
			|||||||
    // 开始 loadingBar
 | 
					    // 开始 loadingBar
 | 
				
			||||||
    window.$loadingBar?.start();
 | 
					    window.$loadingBar?.start();
 | 
				
			||||||
    // 页面跳转权限处理
 | 
					    // 页面跳转权限处理
 | 
				
			||||||
    await handlePagePermission(to, from, next, router);
 | 
					    await createPermissionGuard(to, from, next, router);
 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
  router.afterEach(to => {
 | 
					  router.afterEach(to => {
 | 
				
			||||||
    // 设置document title
 | 
					    // 设置document title
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,39 +1,19 @@
 | 
				
			|||||||
import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 | 
					import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 | 
				
			||||||
import { routeName } from '@/router';
 | 
					import { routeName } from '@/router';
 | 
				
			||||||
import { useAuthStore, useRouteStore } from '@/store';
 | 
					import { useAuthStore } from '@/store';
 | 
				
			||||||
import { exeStrategyActions, getToken } from '@/utils';
 | 
					import { exeStrategyActions, getToken } from '@/utils';
 | 
				
			||||||
 | 
					import { createDynamicRouteGuard } from './dynamic';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/** 处理路由页面的权限 */
 | 
					/** 处理路由页面的权限 */
 | 
				
			||||||
export async function handlePagePermission(
 | 
					export async function createPermissionGuard(
 | 
				
			||||||
  to: RouteLocationNormalized,
 | 
					  to: RouteLocationNormalized,
 | 
				
			||||||
  from: RouteLocationNormalized,
 | 
					  from: RouteLocationNormalized,
 | 
				
			||||||
  next: NavigationGuardNext,
 | 
					  next: NavigationGuardNext,
 | 
				
			||||||
  router: Router
 | 
					  router: Router
 | 
				
			||||||
) {
 | 
					) {
 | 
				
			||||||
  const auth = useAuthStore();
 | 
					  // 动态路由
 | 
				
			||||||
  const route = useRouteStore();
 | 
					  const permission = await createDynamicRouteGuard(to, from, next, router);
 | 
				
			||||||
 | 
					  if (!permission) return;
 | 
				
			||||||
  const isLogin = Boolean(getToken());
 | 
					 | 
				
			||||||
  const permissions = to.meta.permissions || [];
 | 
					 | 
				
			||||||
  const needLogin = Boolean(to.meta?.requiresAuth) || Boolean(permissions.length);
 | 
					 | 
				
			||||||
  const hasPermission = !permissions.length || permissions.includes(auth.userInfo.userRole);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // 初始化动态路由
 | 
					 | 
				
			||||||
  if (!route.isAddedDynamicRoute) {
 | 
					 | 
				
			||||||
    await route.initDynamicRoute(router);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    if (to.name === routeName('not-found-page')) {
 | 
					 | 
				
			||||||
      // 动态路由没有加载导致被not-found-page路由捕获,等待动态路由加载好了,回到之前的路由
 | 
					 | 
				
			||||||
      next({ path: to.fullPath, replace: true, query: to.query });
 | 
					 | 
				
			||||||
      return;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // 动态路由已经加载,仍然未找到,重定向到not-found
 | 
					 | 
				
			||||||
  if (to.name === routeName('not-found-page')) {
 | 
					 | 
				
			||||||
    next({ name: routeName('not-found'), replace: true });
 | 
					 | 
				
			||||||
    return;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
  // 外链路由, 从新标签打开,返回上一个路由
 | 
					  // 外链路由, 从新标签打开,返回上一个路由
 | 
				
			||||||
  if (to.meta.href) {
 | 
					  if (to.meta.href) {
 | 
				
			||||||
@@ -42,6 +22,12 @@ export async function handlePagePermission(
 | 
				
			|||||||
    return;
 | 
					    return;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  const auth = useAuthStore();
 | 
				
			||||||
 | 
					  const isLogin = Boolean(getToken());
 | 
				
			||||||
 | 
					  const permissions = to.meta.permissions || [];
 | 
				
			||||||
 | 
					  const needLogin = Boolean(to.meta?.requiresAuth) || Boolean(permissions.length);
 | 
				
			||||||
 | 
					  const hasPermission = !permissions.length || permissions.includes(auth.userInfo.userRole);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  const actions: Common.StrategyAction[] = [
 | 
					  const actions: Common.StrategyAction[] = [
 | 
				
			||||||
    // 已登录状态跳转登录页,跳转至首页
 | 
					    // 已登录状态跳转登录页,跳转至首页
 | 
				
			||||||
    [
 | 
					    [
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user