其他分享
首页 > 其他分享> > Vue如何做按钮级别的权限?

Vue如何做按钮级别的权限?

作者:互联网

对于权限来说都不陌生,而菜单权限及路由权限都很好控制,但按钮权限就没那么容易了,本文主要说明每个页面的按钮根据其拥有的权限来控制:

1)定义按钮权限的指令

import Vue from 'vue'


Vue.directive('has', {
  inserted: function (el, binding, vnode) {
      let isExist = false
      // 从配置获取用户按钮权限
      let btnPermissions = vnode.context.$route.meta.btnPermissions
      if (btnPermissions && btnPermissions.indexOf(binding.value) > -1) {
          isExist = true
      }
      //不存在时删除节点
      if (el.parentNode && !isExist) {
          el.parentNode.removeChild(el)
      }
  }
})

此指令是根据路由中配置的权限是否显示节点。

需要注意的是,上述的指令配置是针对Vue2.0的,对于Vue3.0会报错,需要使用下面的方式(这是一个大坑):

import App from './App.vue'
const app = createApp(App);

app.directive('button', {
   mounted(el, binding) {
       let isExist = false
       // 从配置获取用户按钮权限
       let btnPermissions = router.currentRoute.value.meta.btnPermissions
       if (btnPermissions && btnPermissions.indexOf(binding.value) > -1) {
           isExist = true
      }
      //不存在时删除节点
      if (el.parentNode && !isExist) {
           el.parentNode.removeChild(el)
       }
   }
})

2)定义两个页面,分别是home.vue和test.vue,其内容是一样的

<template>
  <div>
    <el-button v-has="'query'">查询</el-button>
    <el-button v-has="'add'">添加</el-button>
    <el-button v-has="'delete'">删除</el-button>
  </div>
</template>

需要注意的是,指令中的字符串一定要包含单引号,否则会报错。

3)在router/index.js中配置路由:

const routes = [
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home'),
    meta: {
      btnPermissions: ['query', 'add', 'delete']
    }
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/test'),
    meta: {
      btnPermissions: ['query', 'add']
    }
  },

]

在每个路由中配置了meta属性,里面包含了每个页面用于的权限。

分别访问/home 和 /test,发现home显示了所有的按钮,而test只显示了两个按钮。此时已经做到了按钮级别的权限。模拟了两个不同的角色可查看的按钮信息。

在正式开发过程中,每个页面的按钮即可通过指令的方式,在后台管理中维护菜单及按钮信息,再将这些权限分配给不同的角色,那么在用户登录后动态渲染路由和菜单,就能达到效果。

标签:el,btnPermissions,Vue,isExist,按钮,home,权限
来源: https://www.cnblogs.com/zys2019/p/15525804.html