后台管理系统权限那些事

前言

我们在做后台管理系统时候，首先需要处理的就是权限问题，即这个系统有哪些菜单和操作权限？不同的角色分别拥有哪些菜单和操作权限？我们的菜单栏目每个角色是固定的还是可以动态配置的？等等...

当然处理的方式，各个项目根据自身的需求会有不同，如角色相对固定，权限相对固定的管理系统，我们一般前端处理，如角色会根据业务不断增加，权限各种穿插，我们一般后端返回

菜单权限

前端处理

1.业务场景

典型的场景如我司之前做的在线教育后台管理系统，里面角色分为管理员、班主任、顾问、任课老师，角色相对固定，每个角色拥有固定的板块，班主任老师只负责整理学生数据和根据需求排课，顾问负责将收集到的意向客户信息录入系统并跟踪记录，任课老师负责开放自己可授课时间段以及课前查阅学生上课需求

2.怎么做

根据需求，我们将角色分为admin、headteacher、adviser、teacher四种

2.1 我们在router文件中添加roles数组字段，用于设置可访问的角色

{
    path: '/students',
    name: 'students',
    component: layout,
    meta: {
      title: '学生信息',
      icon: 'students',
        
      roles: ['admin', 'headteacher','adviser'],
    },
    redirect: '/students/list',
    children: [
      {
        path: 'list',
        name: 'list',
        component: () => import(/* webpackChunkName: "students" */ '@/views/students/list/index.vue'),
        meta: {
          title: '学生列表',
          roles: ['admin','headteacher'],
        },
      },
      {
        path: 'directive',
        name: 'PermissionDirective',
        component: () => import(/* webpackChunkName: "students" */ '@/views/students/parent/index.vue'),
        meta: {
          title: '家长列表',
          roles: ['admin', 'adviser'],
        },
      },
    ],
  },
}

2.2 我们在登录后，由后台返回用户的角色

如后台返回角色为admin

{
  code: 0,
  data: {
    userId: '1',
    username: '小在',
    avatar: 'https://xxxxxxxxxxxxxxxxxx',
    phone: '18888888888',
    roles: ['admin'],
  },
  message: 'ok',
}

2.3 根据角色过滤出路由

// 引入router
import router from './router';
​
const rolse = ['admin']
const accessRoutes = generateRoutes(rolse)
​
router.addRoutes(accessRoutes);
​
//可以将accessRoutes存放在vuex或缓存中，以便菜单递归

//引入项目中的路由表
import { asyncRoutes } from '@/router/index';
​
//生成路由表
function generateRoutes(roles) {
      let accessedRoutes = []
      // admin为最高权限
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || [];
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
      }
      return accessedRoutes
    });
},
​
// 根据权限过滤出路由表
function filterAsyncRoutes(routes, roles) {
  const res = [];
  routes.forEach((route) => {
    if (hasPermission(route, roles)) {
      if (route.children) {
        route.children = filterAsyncRoutes(route.children, roles);
      }
      res.push(route);
    }
  });
​
  return res;
}
​
// 判断是否有权限
function hasPermission(route, roles) {
  if (route.meta.roles) {
    return roles.some((role) => route.meta.roles.includes(role));
  }
  return true;
}

后端处理

1.业务场景

典型的业务场景如我司之前做的公司内部管理系统，即公司分为若干个部门，每个部门有不同的菜单，每个人有不同的角色，不同的角色有不同的权限，我们每新增一个功能页面，运营都会在【菜单管理】中配置，然后分配给不同的角色 。

2.怎么做

核心思路是用户登录后，调用获取用户菜单接口的接口，后台返回路由菜单，前端根据返回值渲染菜单栏。

当然最后我们是需要类似这样的菜单数据，返回数据如果不一致我们需要自行清洗成如下数据

{
  path: '/user',
  redirect: '/user/basic',
  component: layout,
  meta: {
    title: '个人中心',
    icon: 'user',
  },
  children: [
    {
      path: 'basic',
      name: 'userBasic',
      component: () => import('@/views/user/index.vue'),
      meta: {
        title: '个人信息',
        icon: 'user',
      },
    },
  ],
};

按钮权限

待更新