vue+ruoyi权限控制，控制dialog是否出现

最新推荐文章于 2024-01-03 09:06:31 发布

Judylly

最新推荐文章于 2024-01-03 09:06:31 发布

阅读量392

点赞数

分类专栏： ruoyi 文章标签： vue Powered by 金山文档

本文链接：https://blog.csdn.net/Judylly/article/details/128948101

版权

ruoyi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

描述：需求是对一个进入系统，弹窗提示的消息提醒，根据登录用户角色的不同，控制其是否弹出的问题

解决思路：我找了很多关于ruoyi权限控制的解决方案，大多都是通过v-hasPermi=[]来控制的或者v-hasRole=[]来控制的如下：

<el-button
        type="primary"
        plain
        size="mini"
        :disabled="multiple"
        @click="printBoxExcel"
        v-hasPermi="['business:boxData:print']"
      >打印箱清单</el-button>

但是我发现这个对于dialog并不起作用，v-hasPermi=[]等只对div button...这些起作用，然后我就想着在dialog外面包一个div发现即使div没有权限，但是当dialog的:visible.sync="overOpen"为true的时候弹窗还是会显示的，后面我的解决如下：

拿到用户权限列表（我这里是写了封了一个方法引入的），然后判断给用户的权限标识是否存在于权限列表中

import store from '@/store'
export function hasPerMission(data){
        const permissions = store.getters && store.getters.permissions
        if(permissions.includes(data) || permissions[0]=='*:*:*'){
            return true
        }
            return false
        
    }

然后在dialog使用v-if，通过v-if来控制其是否展示记得在使用的地方要引入hasPerMission哦

<el-dialog v-if="logShow"  title="逾期提醒" :visible.sync="overOpen" width="500px" append-to-body  @close='resetRemindLog'>
      <span>当前有{{dataLength}}份件袋逾期未归还，请处理</span>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="goToOverDetial()" >查看详情</el-button>
        <el-button  @click="resetRemindLog()">关闭弹窗</el-button>
      </div>
    </el-dialog>

//使用方法
 getoverList(){
      this.logShow = hasPerMission('business:archive:messageReminder')//business:archive:messageReminder这个就是我设置的权限标识，这个在系统配置
    },