Vue中的角色权限管理

Vue中的角色权限管理

一、实现思路：

1.后端判断用户拥有哪些权限，返回前端所需要的路由及导航数据
2.动态加载路由
3.动态显示导航

二、具体实现：

1.在路由钩子 beforeEach中发送请求获取需要的路由及导航数据

//伪代码
router.beforeEach((to,from,next)=>{
  if(缓存中没有有路由导航数据){
    // 发送请求 获取路由
    // 获取数据后，缓存
    //store.dispatch('SETNAV','获取到的数据')
    next()
  }else{
    next()
  }
  
})
  
// })

一般情况下路由和导航数据在同一个对象中，具体有哪些需要根据项目来定。
2. 动态添加路由
组装成路由需要的数据

router.addRouters(组装好的路由数据)

3. 动态显示导航栏
   

按钮权限

通过后台返回的按钮权限 在页面通过 v-if 或 自定义指令
自定义指令实现按钮权限：

//页面代码
<template>
  <div class="home">
    <div>
      <h1>vue中按钮权限控制</h1>
      <button v-has="'add'">添加</button>
      <button v-has="'edit'">编辑</button>
      <button v-has="'delete'">删除</button>
    </div>
  </div>
</template>

<script>
import has from '@/directives/has'
export default {
  name: 'HomeView',
  directives:{
    has
  },
</script>

//has.js
// const buttonPermission = {
//     add:true,
//     edit:true,
//     delete:true
//  }
export default {
    inserted(el, binding, vnode){
       let btnPermissionValue = binding.value
       //vnode.context.$store.state.buttonPermission获取存在sotre中的值
       let boolean = vnode.context.$store.state.buttonPermission[btnPermissionValue]
       //也可直接使用获取数据
       //  let boolean = buttonPermission[btnPermissionValue]
       !boolean && el.parentNode.removeChild(el)
    }   
}

//store中的部分代码
  state: {
    buttonPermission:{
      add:true,
      edit:false,
      delete:true
    }
  },