关于动态路由跟精确到按钮级权限的前端渲染

最新推荐文章于 2023-02-25 19:43:43 发布

m0_64458746

最新推荐文章于 2023-02-25 19:43:43 发布

阅读量116

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_64458746/article/details/125305404

版权

本文探讨了一种精确到按钮级别的权限管理系统，通过获取后台数据并配合Vuex过滤路由，使用自定义Vue指令`allow`实现动态权限展示。通过实例展示了如何在Vue应用中判断用户角色，仅显示其具备的按钮。

摘要由CSDN通过智能技术生成

这段时间做过一个精确到按钮级别的权限管理模块。

这个模块首先需要获取后台数据，再通过后台传给我的数据，再通过自己的vuex配合过滤出我的路由，然后通过router的addrouter方法把自己过滤出来的数组传进去。

至于按钮级别的守卫，就是自定义一个方法，

// 全局注册组件
// Vue.component
// 全局注册指令
// 参数1: 指令名称
// 参数2: 配置对象, 需要定义一个 inserted 钩子函数
// 钩子函数: 在特定时间节点自动执行, 不需要我们手动调用
Vue.directive('allow', {
  // 当指令绑定的标签被插入到真实 DOM 树上时触发
  // 会携带一个参数: el 真实 DOM 元素
  inserted(el, binding) {
    // el.focus()
    // console.log(binding.value)
    // 获取 Vuex 中的权限点信息
    const points = store.state.user.userInfo.roles.points
    // console.log(points)
    // 判断是否包含
    if (!points.includes(binding.value)) {
      // 如果包含就允许显示
      // 否则就不显示
      // el.style.display = 'none'
      el.remove() // 自我毁灭
    }
  }
})