ToB企服应用市场:ToB评测及商务社交产业平台

标题: Online Judge——【前端项目初始化】全局权限管理 [打印本页]
作者: 九天猎人    时间: 2024-12-2 04:57
标题: 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. <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;
复制代码

  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4