Vue多页面 按钮级别权限控制 directive指令控制

博客介绍了Vue多页面中按钮级别权限控制的方法,利用directive构建指令实现。具体步骤包括修改router.js、新建btnPermission.js文件并引入index.js,在页面添加权限,最后在css中添加hidden样式。

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

Vue多页面 按钮级别权限控制 directive指令控制

利用driective 构建自己的指令,实现按钮级别权限

项目结构如下:

修改router.js

    {
        path: 'schools',
        name: '列表',
        component: () => import('./eduAdministration/SchoolList'),
        meta: {
          permissions: ['schools'],
          btnpermissions:['admin','test'],
          title: '列表',
          icon: '',
          scrollToTop: true
        }
      },

新建文件 btnPermission.js文件

内容如下

import Vue from 'vue'
import store from '../index'
/**权限指令**/
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    // 获取按钮权限
    let Permissions = vnode.context.$route.meta.btnpermissions;
    console.log('permission',Permissions)
    if (!Vue.prototype.$_has(Permissions)) {
      let className=el.getAttribute("class")
      className=className.concat(" hidden")
      el.setAttribute("class",className)
    }
  }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
   debugger
  let PermissionsStr =store.getters.roles;
  if (PermissionsStr == undefined || PermissionsStr == null) {
    return false;
  }

  PermissionsStr.forEach((per)=>{
    if (value.indexOf(per) > -1) {
      isExist = true;
    }
  })
  return isExist;
};
export {has}

将文件引入index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import getters from './getters'
import permission from './modules/permission'
import has from './modules/btnPermission'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    user,
    permission
  },
  getters
})

export default store

页面添加权限

     el-button(size='mini' @click="handleEdit(scope.row)" v-has) 编辑

最后一步

在 css中添加hidden样式

<style scoped>
  .hidden {
    display:none;
  }
</style>

 

大功告成

 

posted @ 2019-05-22 20:30 菜鸟的进击 阅读( ...) 评论( ...) 编辑 收藏
### Vue 实现按钮级别权限控制 #### 使用自定义指令实现按钮级别权限控制 为了实现在 Vue 项目中的按钮级别权限控制,可以采用自定义指令的方式。这种方式不仅能够简化代码逻辑,还能提高可维护性和灵活性。 在 `el-button` 按钮上设置特定的标签数值,利用 Vue指令功能来获取这些数值并与用户的权限数据进行对比。当用户不具备某按钮的操作权限时,在指令处理函数中执行相应操作使该按钮不可见或禁用[^2]。 下面是一个具体的例子展示如何创建并应用这个自定义指令: ```javascript // 定义全局自定义指令 v-permission Vue.directive('permission', { inserted(el, binding) { const { value } = binding; // 获取当前登录用户的权限列表(假设存储于 Vuex store) const permissionList = store.getters['user/permissions']; if (!Array.isArray(value)) throw new Error(`need an array! like v-permission="[\'admin\', \'editor\']"`); // 如果用户没有对应的角色,则移除DOM节点 if (!value.some(role => permissionList.includes(role))) { el.parentNode && el.parentNode.removeChild(el); } } }); ``` 此段 JavaScript 代码展示了如何注册名为 `v-permission` 的全局自定义指令,并在其被插入到 DOM 后触发相应的钩子函数来进行权限验证。这里假定角色信息保存在一个数组形式的状态管理工具(Vuex Store)里;同时要求传入给指令的是一个字符串类型的数组作为参数用于比较。 接下来是在模板文件中使用上述定义好的自定义指令的例子: ```html <template> <!-- 只有具有 'admin' 或者 'editor' 权限的人才能看到这个按钮 --> <el-button type="primary" v-permission="['admin','editor']">编辑</el-button> <!-- 对于其他需要不同权限组合的情况也可以按照相同方式添加更多按钮 --> </template> ``` 这样做的好处在于它使得 HTML 结构保持清晰简洁的同时实现了基于角色的访问控制机制。每当页面加载完成之后,Vue 将会自动调用我们之前编写的插件逻辑去判断每一个绑定了 `v-permission` 属性的元素是否应该呈现出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值