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();
});