若依--自定义指令 v-hasPermi 和 v-hasRole

胡倩倩blog / 2023-05-08 / 原文

为什么大家都在用若依？
若依版本有很多种，前端的，后端的，大家点击去看看 http://doc.ruoyi.vip/，看完记得回来！
第一次接触到若依是进入这家公司之后，以前做项目都是“白手起家”，若依项目结构清晰，很多轮子都被造好了，不用自己搭建项目，git clone 就完成了，happy！还有项目文档可以查看，虽然我很少看...但是应该还是有帮助的。
但是需要本人继承的业务代码却十分混乱，没办法，为了钱钱，捂着头也要编下去。
往事不要再提，聊点开心的！接着上一片随笔的批量操作组件聊一聊指令：
在权限上，若依提供了两种指令：操作和角色。

操作权限指令，v-hasPermi：

import useUserStore from '@/store/modules/user'
export default {
    mounted(el, binding, vnode) {
        const { value } = binding
        const all_permission = "*:*:*";
        const permissions = useUserStore().permissions // 用户的所有权限
    
        if (value && value instanceof Array && value.length > 0) {
            const permissionFlag = value
    
            const hasPermissions = permissions.some(permission => {
            return all_permission === permission || permissionFlag.includes(permission)
            })
    
            if (!hasPermissions) {
            el.parentNode && el.parentNode.removeChild(el)
            }
        } else {
            // throw new Error(`请设置操作权限标签值`)
        }
    }
}

角色权限指令，v-hasRole：

 import useUserStore from '@/store/modules/user'
 export default {
     mounted(el, binding, vnode) {
         const { value } = binding
         const super_admin = "admin";
         const roles = useUserStore().roles // 用户角色
     
         if (value && value instanceof Array && value.length > 0) {
           const roleFlag = value
     
           const hasRole = roles.some(role => {
             return super_admin === role || roleFlag.includes(role)
           })
     
           if (!hasRole) {
             el.parentNode && el.parentNode.removeChild(el)
           }
         } else {
           throw new Error(`请设置角色权限标签值`)
         }
     }
 }