fix: 修复页面刷新导致丢失权限的问题
This commit is contained in:
gaoyunqi
@ -1,68 +1,66 @@
|
||||
import type { Router } from 'vue-router';
|
||||
import { configureDynamicParamsMenu } from '../helper/menuHelper';
|
||||
import { Menu } from '../types';
|
||||
import { PermissionModeEnum } from '/@/enums/appEnum';
|
||||
import { useAppStoreWithOut } from '/@/store/modules/app';
|
||||
|
||||
import { usePermissionStoreWithOut } from '/@/store/modules/permission';
|
||||
|
||||
export function createParamMenuGuard(router: Router) {
|
||||
const permissionStore = usePermissionStoreWithOut();
|
||||
router.beforeEach(async (to, _, next) => {
|
||||
console.log('createParamMenuGuard', to);
|
||||
|
||||
to.fullPath = (to.fullPath as string) + convertQuery(to);
|
||||
|
||||
// filter no name route
|
||||
if (!to.name) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// menu has been built.
|
||||
if (!permissionStore.getIsDynamicAddedRoute) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
let menus: Menu[] = [];
|
||||
if (isBackMode()) {
|
||||
menus = permissionStore.getBackMenuList;
|
||||
} else if (isRouteMappingMode()) {
|
||||
menus = permissionStore.getFrontMenuList;
|
||||
}
|
||||
menus.forEach((item) => configureDynamicParamsMenu(item, to.params));
|
||||
|
||||
next();
|
||||
});
|
||||
}
|
||||
|
||||
const convertQuery = (to) => {
|
||||
try {
|
||||
if (to.meta.remark && to.meta.remark.indexOf('?') > -1 && to.fullPath.indexOf('?') <= -1) {
|
||||
const str = to.meta.remark.substring(1);
|
||||
const paramArray = str.split('&');
|
||||
for (const param of paramArray) {
|
||||
const p = param.split('=');
|
||||
to.query[p[0]] = p[1];
|
||||
}
|
||||
return to.meta.remark;
|
||||
}
|
||||
return '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const getPermissionMode = () => {
|
||||
const appStore = useAppStoreWithOut();
|
||||
return appStore.getProjectConfig.permissionMode;
|
||||
};
|
||||
|
||||
const isBackMode = () => {
|
||||
return getPermissionMode() === PermissionModeEnum.BACK;
|
||||
};
|
||||
|
||||
const isRouteMappingMode = () => {
|
||||
return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING;
|
||||
};
|
||||
import type { Router } from 'vue-router';
|
||||
import { configureDynamicParamsMenu } from '../helper/menuHelper';
|
||||
import { Menu } from '../types';
|
||||
import { PermissionModeEnum } from '/@/enums/appEnum';
|
||||
import { useAppStoreWithOut } from '/@/store/modules/app';
|
||||
|
||||
import { usePermissionStoreWithOut } from '/@/store/modules/permission';
|
||||
|
||||
export function createParamMenuGuard(router: Router) {
|
||||
const permissionStore = usePermissionStoreWithOut();
|
||||
router.beforeEach(async (to, _, next) => {
|
||||
to.fullPath = (to.fullPath as string) + convertQuery(to);
|
||||
|
||||
// filter no name route
|
||||
if (!to.name) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// menu has been built.
|
||||
if (!permissionStore.getIsDynamicAddedRoute) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
let menus: Menu[] = [];
|
||||
if (isBackMode()) {
|
||||
menus = permissionStore.getBackMenuList;
|
||||
} else if (isRouteMappingMode()) {
|
||||
menus = permissionStore.getFrontMenuList;
|
||||
}
|
||||
menus.forEach((item) => configureDynamicParamsMenu(item, to.params));
|
||||
|
||||
next();
|
||||
});
|
||||
}
|
||||
|
||||
const convertQuery = (to) => {
|
||||
try {
|
||||
if (to.meta.remark && to.meta.remark.indexOf('?') > -1 && to.fullPath.indexOf('?') <= -1) {
|
||||
const str = to.meta.remark.substring(1);
|
||||
const paramArray = str.split('&');
|
||||
for (const param of paramArray) {
|
||||
const p = param.split('=');
|
||||
to.query[p[0]] = p[1];
|
||||
}
|
||||
return to.meta.remark;
|
||||
}
|
||||
return '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const getPermissionMode = () => {
|
||||
const appStore = useAppStoreWithOut();
|
||||
return appStore.getProjectConfig.permissionMode;
|
||||
};
|
||||
|
||||
const isBackMode = () => {
|
||||
return getPermissionMode() === PermissionModeEnum.BACK;
|
||||
};
|
||||
|
||||
const isRouteMappingMode = () => {
|
||||
return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING;
|
||||
};
|
||||
|
||||
@ -1,117 +1,117 @@
|
||||
import type { Router, RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { usePermissionStoreWithOut } from '/@/store/modules/permission';
|
||||
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
import { useUserStoreWithOut } from '/@/store/modules/user';
|
||||
|
||||
import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
|
||||
|
||||
import { RootRoute } from '/@/router/routes';
|
||||
|
||||
const LOGIN_PATH = PageEnum.BASE_LOGIN;
|
||||
|
||||
const ROOT_PATH = RootRoute.path;
|
||||
|
||||
const whitePathList: PageEnum[] = [LOGIN_PATH];
|
||||
|
||||
export function createPermissionGuard(router: Router) {
|
||||
const userStore = useUserStoreWithOut();
|
||||
const permissionStore = usePermissionStoreWithOut();
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
if (
|
||||
from.path === ROOT_PATH &&
|
||||
to.path === PageEnum.BASE_HOME &&
|
||||
userStore.getUserInfo.homePath &&
|
||||
userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
|
||||
) {
|
||||
next(userStore.getUserInfo.homePath);
|
||||
return;
|
||||
}
|
||||
|
||||
const token = userStore.getToken;
|
||||
|
||||
// Whitelist can be directly entered
|
||||
if (whitePathList.includes(to.path as PageEnum)) {
|
||||
if (to.path === LOGIN_PATH && token) {
|
||||
const isSessionTimeout = userStore.getSessionTimeout;
|
||||
try {
|
||||
await userStore.afterLoginAction();
|
||||
if (!isSessionTimeout) {
|
||||
next((to.query?.redirect as string) || '/');
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// token does not exist
|
||||
if (!token) {
|
||||
// You can access without permission. You need to set the routing meta.ignoreAuth to true
|
||||
if (to.meta.ignoreAuth) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// redirect login page
|
||||
const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
|
||||
path: LOGIN_PATH,
|
||||
replace: true,
|
||||
};
|
||||
if (to.path) {
|
||||
redirectData.query = {
|
||||
...redirectData.query,
|
||||
redirect: to.path,
|
||||
};
|
||||
}
|
||||
next(redirectData);
|
||||
return;
|
||||
}
|
||||
|
||||
// Jump to the 404 page after processing the login
|
||||
if (
|
||||
from.path === LOGIN_PATH &&
|
||||
to.name === PAGE_NOT_FOUND_ROUTE.name &&
|
||||
to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
|
||||
) {
|
||||
next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
|
||||
return;
|
||||
}
|
||||
|
||||
// get userinfo while last fetch time is empty
|
||||
if (userStore.getLastUpdateTime === 0) {
|
||||
try {
|
||||
await userStore.getUserInfoAction();
|
||||
} catch (err) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (permissionStore.getIsDynamicAddedRoute) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
const routes = await permissionStore.buildRoutesAction(false);
|
||||
|
||||
routes.forEach((route) => {
|
||||
router.addRoute(route as unknown as RouteRecordRaw);
|
||||
});
|
||||
|
||||
router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
|
||||
|
||||
permissionStore.setDynamicAddedRoute(true);
|
||||
|
||||
if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
|
||||
// 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
|
||||
next({ path: to.fullPath, replace: true, query: to.query });
|
||||
} else {
|
||||
const redirectPath = (from.query.redirect || to.path) as string;
|
||||
const redirect = decodeURIComponent(redirectPath);
|
||||
const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
|
||||
next(nextData);
|
||||
}
|
||||
});
|
||||
}
|
||||
import type { Router, RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { usePermissionStoreWithOut } from '/@/store/modules/permission';
|
||||
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
import { useUserStoreWithOut } from '/@/store/modules/user';
|
||||
|
||||
import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
|
||||
|
||||
import { RootRoute } from '/@/router/routes';
|
||||
|
||||
const LOGIN_PATH = PageEnum.BASE_LOGIN;
|
||||
|
||||
const ROOT_PATH = RootRoute.path;
|
||||
|
||||
const whitePathList: PageEnum[] = [LOGIN_PATH];
|
||||
|
||||
export function createPermissionGuard(router: Router) {
|
||||
const userStore = useUserStoreWithOut();
|
||||
const permissionStore = usePermissionStoreWithOut();
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
if (
|
||||
from.path === ROOT_PATH &&
|
||||
to.path === PageEnum.BASE_HOME &&
|
||||
userStore.getUserInfo.homePath &&
|
||||
userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
|
||||
) {
|
||||
next(userStore.getUserInfo.homePath);
|
||||
return;
|
||||
}
|
||||
|
||||
const token = userStore.getToken;
|
||||
|
||||
// Whitelist can be directly entered
|
||||
if (whitePathList.includes(to.path as PageEnum)) {
|
||||
if (to.path === LOGIN_PATH && token) {
|
||||
const isSessionTimeout = userStore.getSessionTimeout;
|
||||
try {
|
||||
await userStore.afterLoginAction();
|
||||
if (!isSessionTimeout) {
|
||||
next((to.query?.redirect as string) || '/');
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// token does not exist
|
||||
if (!token) {
|
||||
// You can access without permission. You need to set the routing meta.ignoreAuth to true
|
||||
if (to.meta.ignoreAuth) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// redirect login page
|
||||
const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
|
||||
path: LOGIN_PATH,
|
||||
replace: true,
|
||||
};
|
||||
if (to.path) {
|
||||
redirectData.query = {
|
||||
...redirectData.query,
|
||||
redirect: to.path,
|
||||
};
|
||||
}
|
||||
next(redirectData);
|
||||
return;
|
||||
}
|
||||
|
||||
// Jump to the 404 page after processing the login
|
||||
if (
|
||||
from.path === LOGIN_PATH &&
|
||||
to.name === PAGE_NOT_FOUND_ROUTE.name &&
|
||||
to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
|
||||
) {
|
||||
next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
|
||||
return;
|
||||
}
|
||||
|
||||
// get userinfo while last fetch time is empty
|
||||
if (userStore.getLastUpdateTime === 0) {
|
||||
try {
|
||||
await userStore.getUserInfoAction();
|
||||
} catch (err) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (permissionStore.getIsDynamicAddedRoute) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
const routes = await permissionStore.buildRoutesAction();
|
||||
|
||||
routes.forEach((route) => {
|
||||
router.addRoute(route as unknown as RouteRecordRaw);
|
||||
});
|
||||
|
||||
router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
|
||||
permissionStore.setDynamicAddedRoute(true);
|
||||
|
||||
if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
|
||||
// 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
|
||||
next({ path: to.fullPath, replace: true, query: to.query });
|
||||
} else {
|
||||
const redirectPath = (from.query.redirect || to.path) as string;
|
||||
const redirect = decodeURIComponent(redirectPath);
|
||||
const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
|
||||
next(nextData);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user