feat(access): 添加路由权限检查功能

实现路由守卫的权限检查逻辑,根据用户角色和路由meta配置决定是否允许访问或重定向
This commit is contained in:
2025-11-15 20:28:13 +08:00
parent 8dd4f1fe26
commit feb53ffad8

View File

@@ -1,6 +1,56 @@
/** src/access/index.ts */
import type { RouteLocationNormalizedGeneric } from "vue-router";
import router from "../router/router"; import router from "../router/router";
import type { LoginUesr } from "../store/types";
import { useUserStore } from "../store/user"; import { useUserStore } from "../store/user";
import ACCESS_ENUM from "./accessEnum"; import ACCESS_ENUM from "./accessEnum";
import checkAccess from "./checkAccess"; import checkAccess from "./checkAccess";
const userStore = useUserStore();
/**
* 检查是否需要权限访问
* @param to 要访问的路由
* @param loginUser 当前登录用户
* @returns 如果需要权限访问且权限不足,返回重定向路径;否则返回空字符串
*/
const redirectWithAccess = (to: RouteLocationNormalizedGeneric,loginUser: LoginUesr):string =>{
// 获取要访问的路由的权限
const needAccess: string = to.meta?.access ?? ACCESS_ENUM.NOT_LOGIN; //?? 运算符, 如果 to.meta?.access 为 undefined 或 null
// 则使用 ACCESS_ENUM.NOT_LOGIN 作为默认值
// 必须要登录才能访问的页面
if (needAccess !== ACCESS_ENUM.NOT_LOGIN) {
// 如果说当前是未登录状态 那直接给他跳登录页面去
if (
!loginUser ||
!loginUser.userRole ||
loginUser.userRole === ACCESS_ENUM.NOT_LOGIN
) {
return `/user/login?redirect=${to.fullPath}`;
}
// 权限不足,跳到无权限页面
if (!checkAccess(loginUser, needAccess)) {
return "/noAuth";
}
}
return "";
}
// 这里接收异步函数,是因为下面要调用 userStore.getLoginUser()
router.beforeEach(async (to, from, next) => {
console.log("登陆用户信息", userStore.loginUser);
let loginUser = userStore.loginUser;
// 如果之前没登陆过,自动登录
if (!loginUser || !loginUser.userRole) {
await userStore.getLoginUser();
loginUser = userStore.loginUser;
}
// 检查是否需要权限访问
const redirectUrl = redirectWithAccess(to, loginUser);
if (redirectUrl) {
next(redirectUrl);
return;
}
// 未重定向时,继续导航
next();
});