页面权限控制的具体实现

前言

我们在实际开发一个完整项目时，通常会考虑一个问题-----页面权限的控制。一个系统通常用多个权限角色。那么我们应该如何设计去控制只有拥有页面需要的权限才能访问呢？

实现逻辑

要实现这样的效果，我们需要从路由开始进行改造。在设计路由时，我们可以添加一个meta属性，在其中加入权限字段access来表明访问该页面需要的权限。如下面的路由

    { path: '/admin',
      component: BasicLayout,
      meta:{
        access: "admin"
      },
      children:[
          {
              path: "index",
              component: AdminIndexView,
              name: "首页"
          },
          {
              path: "userManage",
              component: UserManageView,
              name: "用户管理页"
          },
      ] },

这是一个拥有管理员权限才能访问的部分页面。
接着我们需要在路由跳转时对当前登录用户的权限进行校验，具体逻辑为
我们在登录成功时，将用户信息存储在pinia中。当路由跳转时，我们要先拿到要跳转页面需要的权限，对pinia中当前登录用户的权限进行校验，有2种情况：
1、用户还没有登录，要判断要跳转的页面需要的权限，如果不需要登录权限，则可以让其跳转；
2、用户登录了，但权限不足，跳转到无权限页面，反之则成功跳转。

代码中要如何实现

这边使用router.beforeEach实现
需要新建

accessEnum .ts

/**
 * 权限定义
 */
const accessEnum = {
  NOT_LOGIN: "notLogin",
  USER: "user",
  ADMIN: "admin",
};
export default accessEnum;

checkAccess.ts

import AccessEnum from '../access/accessEnum';

/**
 * 检查权限
 * return boolean 有无权限
 * @param loginUser
 * @param needAccess
 */
const checkAccess = (loginUser: any, needAccess = AccessEnum.NOT_LOGIN) => {
  //获取当前登录用户的权限
  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;

index.ts

import router from "../router";
import accessEnum from "./accessEnum";
import checkAccess from "./checkAccess";
import {useUserStore} from "../store/useUserStore";
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore();
  console.log("登陆用户信息", userStore.user);
  let loginUser = userStore.user;
  // 如果当前的userStore中没有用户信息或者用户信息中的角色权限为空（loginUser=null||loginUser.userRole=null）,但用户可能在之前登录过，session还未过期
  // @ts-ignore
  if (!loginUser || !loginUser.userRole) {
    // 加 await 是为了等用户登录成功之后，再执行后续的代码
    await userStore.getInfo();
    loginUser = userStore.user;
  }
  const needAccess = (to.meta?.access as string) ?? accessEnum.NOT_LOGIN;
  // 要跳转的页面必须要登陆
  if (needAccess !== accessEnum.NOT_LOGIN) {
    // 如果没登陆，跳转到登录页面
    if (
      !loginUser ||
      !loginUser.userRole ||
      loginUser.userRole === accessEnum.NOT_LOGIN
    ) {
      next(`/?redirect=${to.fullPath}`);
      return;
    }
    // 如果已经登陆了，但是权限不足，那么跳转到无权限页面
    if (!checkAccess(loginUser, needAccess)) {
      next("/noAuth");
      return;
    }
  }
  next();
});

在main.ts中导入index.ts即可实现权限校验。

总结

只要将代码复制进自己的项目进行适当修改即可实现页面权限校验的效果，如有什么不了解或不清楚的可以在评论区问我。