前端权限控制实战：手把手教你玩转角色权限分配-CSDN博客

本文链接：https://blog.csdn.net/2401_85392853/article/details/149743095

今天想和大家聊聊项目中经常遇到的权限控制问题，尤其是角色权限分配这个让很多新手头疼的话题。

为什么我们需要权限控制？

记得我刚入行时接手的第一个后台管理系统项目，所有页面和功能对所有用户开放，结果测试同事用普通账号把管理员功能玩了个遍...（捂脸）从那以后我就明白了：权限控制不是可选项，而是必选项。

权限设计的核心思路

1. 权限模型：RBAC

目前最主流的是RBAC（Role-Based Access Control） 模型，也就是基于角色的访问控制。简单来说就是：

用户关联角色
角色关联权限
权限决定你能干什么

就像游戏里的设定：

普通玩家：只能打怪
公会会长：可以踢人
GM：为所欲为

2. 前端权限控制三板斧

在实际项目中，我们通常需要控制：

页面权限：能不能进入这个路由
操作权限：按钮/功能能不能用
内容权限：能看到哪些数据

代码实战：Vue中的权限实现

路由权限控制

首先我们定义路由时加上meta信息：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiredRoles: ['admin', 'editor'] }
  },
  {
    path: '/user-manage',
    component: UserManage,
    meta: { requiredRoles: ['admin'] }
  }
]

然后在路由守卫里做校验：

router.beforeEach((to, from, next) => {
  const myRoles = store.getters.roles // 获取我的角色
  
  if (to.meta.requiredRoles) {
    if (myRoles.some(role => to.meta.requiredRoles.includes(role))) {
      next()
    } else {
      next('/403') // 无权限页面
    }
  } else {
    next()
  }
})

按钮权限控制

我们可以封装一个权限指令：

// v-permission指令
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const myRoles = store.getters.roles
    
    if (value && value instanceof Array) {
      const hasPermission = myRoles.some(role => {
        return value.includes(role)
      })
      
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('需要传入角色数组，例如v-permission="['admin']"')
    }
  }
})

使用起来很简单：

<button v-permission="['admin']">删除用户</button>

动态菜单实现

根据权限动态生成侧边栏菜单：

// 过滤有权限的路由
function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.requiredRoles) {
      return roles.some(role => route.meta.requiredRoles.includes(role))
    }
    return true
  })
}

// 在vuex中使用
const filteredRoutes = filterRoutes(asyncRoutes, myRoles)
router.addRoutes(filteredRoutes)