使用若依框架做到权限这一块时需要控制按钮的隐藏或显示,展示代码

一,需要找到控制当前账号按钮那些可显示那些不显示接口,本人使用的接口在

 二、然后再page首页调用此接口,并把获取到的值存vuex

 

import {getInfos} from "@/api/login";
  // 获取当前角色的权限
    Infos(){
      getInfos().then(res =>{
    this.$store.commit('permissions',res.permissions)
  })

三、封装一个全局方法

 

// 引入vuex
  import store from '@/store/index';
  // 按钮权限处理
  export function permissions(data) {
    let permission = false
    permission = store.state.permissions.includes( "*:*:*")
    if(!permission){
      permission = store.state.permissions.includes( data)
    }
     return permission
  }

四、在main.js挂在此方法

import {permissions} from '../src/utils/rouyi'
Vue.prototype.permissions = permissions

五、需要控制的按钮直接判断此方法即可

 

   <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              v-if="permissions('system:user:add')"
              >搜索</el-button
            >

总结:研究了一上午若依的自定义指令没有学会,最后没办法只能自己写一个好苦恼,使用v-if判断显示隐藏,权限字符自己添加,在角色里控制每个按钮关键按钮是否显示,也达到了要求

Logo

快速构建 Web 应用程序

更多推荐