fix(projects): 修复路由守卫的动态路由逻辑
This commit is contained in:
parent
21bab1f7c3
commit
b61b0ce25f
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[] = [
|
||||||
// 已登录状态跳转登录页,跳转至首页
|
// 已登录状态跳转登录页,跳转至首页
|
||||||
[
|
[
|
||||||
|
Loading…
Reference in New Issue
Block a user