投稿

Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？

冒牌SEO VueJs 165

Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？

综合实践题⽬，实际开发中经常需要⾯临权限管理的需求，考查实际应⽤能⼒。
权限管理⼀般需求是两个：⻚⾯权限和按钮权限，从这两个⽅⾯论述即可。

思路

  1. 权限管理需求分析：⻚⾯和按钮权限
  2. 权限管理的实现⽅案：分后端⽅案和前端⽅案阐述
  3. 说说各⾃的优缺点

回答范例

  1. 权限管理⼀般需求是⻚⾯权限和按钮权限的管理
  2. 具体实现的时候分后端和前端两种⽅案：
    前端⽅案会把所有路由信息在前端配置，通过路由守卫要求⽤户登录，⽤户登录后根据⻆⾊过滤出路由表。⽐
    如我会配置⼀个 asyncRoutes 数组，需要认证的⻚⾯在其路由的 meta 中添加⼀个 roles 字段，等获取⽤户
    ⻆⾊之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该⽤户能访问的⻚
    ⾯，最后通过 router.addRoutes(accessRoutes) ⽅式动态添加路由即可。
    后端⽅案会把所有⻚⾯路由信息存在数据库中，⽤户登录的时候根据其⻆⾊查询得到其能访问的所有⻚⾯路由
    信息返回给前端，前端再通过 addRoutes 动态添加路由信息
    按钮权限的控制通常会实现⼀个指令，例如 v-permission ，将按钮要求⻆⾊通过值传给v-permission指
    令，在指令的 moutned 钩⼦中可以判断当前⽤户⻆⾊和按钮是否存在交集，有则保留按钮，⽆则移除按钮。
  3. 纯前端⽅案的优点是实现简单，不需要额外权限管理⻚⾯，但是维护起来问题⽐较⼤，有新的⻚⾯和⻆⾊需求
    就要修改前端代码重新打包部署；服务端⽅案就不存在这个问题，通过专⻔的⻆⾊和权限管理⻚⾯，配置⻚⾯
    和按钮权限信息到数据库，应⽤每次登陆时获取的都是最新的路由信息，可谓⼀劳永逸！

知其所以然

路由守卫
https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/permission.js#L13-L14
路由⽣成
https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/store/modules/permission.js#L50-L51
动态追加路由
https://github1s.com/PanJiaChen/vue-element-admin/blob/HEAD/src/permission.js#L43-L44

可能的追问

1、类似 Tabs 这类组件能不能使⽤ v-permission 指令实现按钮权限控制？

<el-tabs>
 <el-tab-pane label="⽤户管理" name="first">⽤户管理</el-tab-pane>
 <el-tab-pane label="⻆⾊管理" name="third">⻆⾊管理</el-tab-pane>
</el-tabs>

2、服务端返回的路由信息如何添加到路由器中？

// 前端组件名和组件映射表
const map = {
 //xx: require('@/views/xx.vue').default // 同步的⽅式
 xx: () => import('@/views/xx.vue') // 异步的⽅式
}
// 服务端返回的asyncRoutes
const asyncRoutes = [
 { path: '/xx', component: 'xx',... }
]
// 遍历asyncRoutes，将component替换为map[component]
function mapComponent(asyncRoutes) {
 asyncRoutes.forEach(route => {
 route.component = map[route.component];
 if(route.children) {
 route.children.map(child => mapComponent(child))
 }
 })
}
mapComponent(asyncRoutes)

回复

我来回复

  • 暂无回复内容

相关问题