Online Judge——【前端项目初始化】全局权限管理

一、权限管理

权限管理：以一套通用的机制界说哪些页面必要哪些权限。
实现思路：1.在路由设置文件界说某个路由的访问权限；2.在全局页面组件中，绑定一个全局路由监听，每次访问页面，根据用户要访问权限页面的路由信息，先判定用户是否有对应的访问权限。3.有则跳转到原页面，没有则拦截或跳转到401鉴权或登录页。

1. //routes.ts
2. {
3.   path: "/admin",
4.   name: "管理员可见",
5.   component: AdminView,
6.   meta: {
7.     access: "canAdmin",
8.   },
9. },

复制代码

1. //App.vue
2. router.beforeEach((to, from, next) => {
3.   // 仅管理员可见，判断当前用户是否有权限
4.   if (to.meta?.access === "canAdmin") {
5.           //如果没有权限，跳转到没权限的页面
6.     if (store.state.user.loginUser?.role !== "admin") {
7.       next("/noAuth");
8.       return;
9.     }
10.   }
11.   //有权限则放行即可
12.   next();
13. });

复制代码

二、通用导航栏组件——根据设置控制菜单显隐

错误写法：

1. //错误写法
2. //v-for执行的优先级要大于v-if
3. //不要使用v-for和v-if条件去渲染元素，这样会先循环所有的元素从而导致性能的浪费
4. <div v-for="item in routes" :key="item.path">
5.   <a-menu-item :key="item.path" v-if="!item.meta?.hideInMenu">
6.         {{ item.name }}
7.   </a-menu-item>
8. </div>

复制代码

• 正确写法：
  1.：routes.ts中给路由新增一个标志位，用于判定路由是否显隐。
  2.：过滤只必要展示的元素数组
  

示例代码：

1. <a-menu-item v-for="item in visibleRoutes" :key="item.path">
2.   {{ item.name }}
3. </a-menu-item>
5. //需要展示在菜单的路由数组
6. const visibleRoutes = routes.filter((item, index) => {
7.   //该函数只要返回值为true就表示这个元素要保留，否则就表示这个元素要被过滤掉
8.   if (item.meta?.hideInMenu) {
9.     return false;
10.   }
11.   return true;
12. });

复制代码

三、根据权限隐藏菜单

需求：只有有权限的菜单才能对用户可见。
原理：类似于控制路由表现隐藏（即该文章第二点），只有该用户没有权限则直接过滤掉即可。
四、全局权限管理

• 第一步：界说权限：
  

1. const ACCESSENUM = {
2.   NOT_LOGIN: "notLogin",
3.   USER: "user",
4.   ADMIN: "admin",
5. };
7. export default ACCESSENUM;

复制代码

• 第二步：界说一个公用的权限校验方法：
  

   界说一个公用的权限校验方法：因为菜单组件中要判定权限、权限拦截也要用到权限判定功能，所以抽离成公共方法。
  创建了一个checkAccess.ts文件如下：

1. import ACCESSENUM from "@/access/accessEnum";
2. /*
3. * 检查权限（判断当前用户是否具有某个权限）
4. * @param loginUser 当前登录用户
5. * @param needAccess 需要有的权限
6. * @return boolean 有无权限*/
8. const checkAccess = (loginUser: any, needAccess = ACCESSENUM.NOT_LOGIN) => {
9.   //截取当前用户具有的权限(如果没有loginUser则标识未登录)
10.   const loginUserAccess = loginUser?.userRole ?? ACCESSENUM.NOT_LOGIN;
11.   if (needAccess === ACCESSENUM.NOT_LOGIN) {
12.     return true;
13.   }
14.   //用户登录才可以访问
15.   if (needAccess === ACCESSENUM.USER) {
16.     // 如果用户没有登录则表示无权限
17.     if (loginUserAccess === ACCESSENUM.NOT_LOGIN) {
18.       return false;
19.     }
20.   }
21.   //如果需要管理员权限
22.   if (needAccess === ACCESSENUM.ADMIN) {
23.     //不为管理员则表示无权限
24.     if (loginUserAccess !== ACCESSENUM.ADMIN) {
25.       return false;
26.     }
27.     return true;
28.   }
29. };
31. export default checkAccess;

复制代码

• 第三步：修改GlobleHeader中的动态菜单组件，根据权限过滤菜单。注意：这里使用computed计算属性，是为了当登任命户信息发生变更时，触发菜单栏的重新染，展示新增权限的菜单项
  

1. const visibleRoutes = computed(() => {
2.   return routes.filter((item, index) => {
3.     //该函数只要返回值为true就表示这个元素要保留，否则就表示这个元素要被过滤掉
4.     if (item.meta?.hideInMenu) {
5.       return false;
6.     }
7.     // 根据权限过滤菜单
8.     if (
9.       !checkAccess(store.state.user.loginUser, item?.meta?.access as string)
10.     ) {
11.       return false;
12.     }
13.     return true;
14.   });
15. });

复制代码

五、全局项目入口

App.vue文件中预留一个可以编写全局初始化逻辑的代码:

1. /*
2. * 全局初始化函数，有全局单次调用的代码，都可以写到这里*/
3. const doInit = () => {
4.   console.log("hello,欢迎来到我的Online Judge项目");
5. };
7. onMounted(() => {
8.   doInit();
9. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。