Online Judge——【前端项目初始化】全局权限管理
一、权限管理权限管理：以一套通用的机制界说哪些页面必要哪些权限。
实现思路：1.在路由设置文件界说某个路由的访问权限；2.在全局页面组件中，绑定一个全局路由监听，每次访问页面，根据用户要访问权限页面的路由信息，先判定用户是否有对应的访问权限。3.有则跳转到原页面，没有则拦截或跳转到401鉴权或登录页。
//routes.ts
{
path: "/admin",
name: "管理员可见",
component: AdminView,
meta: {
access: "canAdmin",
},
},
//App.vue
router.beforeEach((to, from, next) => {
// 仅管理员可见，判断当前用户是否有权限
if (to.meta?.access === "canAdmin") {
//如果没有权限，跳转到没权限的页面
if (store.state.user.loginUser?.role !== "admin") {
next("/noAuth");
return;
}
}
//有权限则放行即可
next();
});
二、通用导航栏组件——根据设置控制菜单显隐
错误写法：
//错误写法
//v-for执行的优先级要大于v-if
//不要使用v-for和v-if条件去渲染元素，这样会先循环所有的元素从而导致性能的浪费
<div v-for="item in routes" :key="item.path">
<a-menu-item :key="item.path" v-if="!item.meta?.hideInMenu">
{{ item.name }}
</a-menu-item>
</div>
[*]正确写法：
1.：routes.ts中给路由新增一个标志位，用于判定路由是否显隐。
2.：过滤只必要展示的元素数组
示例代码：
<a-menu-item v-for="item in visibleRoutes" :key="item.path">
{{ item.name }}
</a-menu-item>
//需要展示在菜单的路由数组
const visibleRoutes = routes.filter((item, index) => {
//该函数只要返回值为true就表示这个元素要保留，否则就表示这个元素要被过滤掉
if (item.meta?.hideInMenu) {
return false;
}
return true;
});
三、根据权限隐藏菜单
需求：只有有权限的菜单才能对用户可见。
原理：类似于控制路由表现隐藏（即该文章第二点），只有该用户没有权限则直接过滤掉即可。
四、全局权限管理
[*]第一步：界说权限：
const ACCESSENUM = {
NOT_LOGIN: "notLogin",
USER: "user",
ADMIN: "admin",
};
export default ACCESSENUM;
[*]第二步：界说一个公用的权限校验方法：
界说一个公用的权限校验方法：因为菜单组件中要判定权限、权限拦截也要用到权限判定功能，所以抽离成公共方法。
创建了一个checkAccess.ts文件如下：
import ACCESSENUM from "@/access/accessEnum";
/*
* 检查权限（判断当前用户是否具有某个权限）
* @param loginUser 当前登录用户
* @param needAccess 需要有的权限
* @return boolean 有无权限*/
const checkAccess = (loginUser: any, needAccess = ACCESSENUM.NOT_LOGIN) => {
//截取当前用户具有的权限(如果没有loginUser则标识未登录)
const loginUserAccess = loginUser?.userRole ?? ACCESSENUM.NOT_LOGIN;
if (needAccess === ACCESSENUM.NOT_LOGIN) {
return true;
}
//用户登录才可以访问
if (needAccess === ACCESSENUM.USER) {
// 如果用户没有登录则表示无权限
if (loginUserAccess === ACCESSENUM.NOT_LOGIN) {
return false;
}
}
//如果需要管理员权限
if (needAccess === ACCESSENUM.ADMIN) {
//不为管理员则表示无权限
if (loginUserAccess !== ACCESSENUM.ADMIN) {
return false;
}
return true;
}
};
export default checkAccess;
[*]第三步：修改GlobleHeader中的动态菜单组件，根据权限过滤菜单。注意：这里使用computed计算属性，是为了当登任命户信息发生变更时，触发菜单栏的重新染，展示新增权限的菜单项
const visibleRoutes = computed(() => {
return routes.filter((item, index) => {
//该函数只要返回值为true就表示这个元素要保留，否则就表示这个元素要被过滤掉
if (item.meta?.hideInMenu) {
return false;
}
// 根据权限过滤菜单
if (
!checkAccess(store.state.user.loginUser, item?.meta?.access as string)
) {
return false;
}
return true;
});
});
五、全局项目入口
App.vue文件中预留一个可以编写全局初始化逻辑的代码:
/*
* 全局初始化函数，有全局单次调用的代码，都可以写到这里*/
const doInit = () => {
console.log("hello,欢迎来到我的Online Judge项目");
};
onMounted(() => {
doInit();
});
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]