权限应用-按钮权限-自定义指令应用功能权限

冬问春风

于 2023-06-11 01:00:08 发布

阅读量352

点赞数

分类专栏： Vue快速CRUD 日常demo，功能组件文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.youkuaiyun.com/ZW005499/article/details/131148867

版权

Vue快速CRUD 同时被 2 个专栏收录

6 篇文章

订阅专栏

日常demo，功能组件

6 篇文章

订阅专栏

文章介绍了在开发中后台管理系统时如何根据用户信息和权限动态显示操作按钮及页面。通过使用Vue的自定义指令`v-permission`，结合用户的角色和权限点，实现无权限元素的隐藏或禁用，确保了界面与用户权限的对应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、介绍

在开发一些中后台管理系统的时候，需要根据每个用户的信息以及权限设置用户有权限操作的按钮，以及有权限观看的页面。

二、应用


<el-button 
  v-permission="'
  add-employee'" 
  size="mini" 
  type="primary" 
  @click="$router.push('/employee/detail')">
  添加员工
</el-button>

三、实现

// 封装自定义指令 用来控制操作权
Vue.directive('permission', {
  // 会在指令作用的元素插入到页面完成以后触发
  inserted(el, binding) {
    // el 指令作用的元素的dom对象
    console.log(el)
    const points = store.state.user.userInfo?.roles?.points || [] // 当前用户信息的操作权
    if (!points.includes(binding.value)) {
      // 不存在就要删除或者禁用
      el.remove() // 删除元素
      // el.disabled = true
      // 线上的权限数据和线下的代码进行对应
    }
  }

})