vue3定义全局自定义指令控制按钮权限

最新推荐文章于 2024-07-29 11:45:48 发布

DHGT666

最新推荐文章于 2024-07-29 11:45:48 发布

阅读量639

点赞数 10

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45632742/article/details/135751054

版权

本文介绍了如何在Vue应用中使用自定义指令实现按钮级别的权限控制，通过检查用户权限列表，仅允许具有相应权限的用户执行特定操作，如创建、编辑和删除商品。

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

<template>
  <div>
    <h3>自定义指令实现按钮级权限控制</h3>
    <button class="btn" v-permission="'goods:create'">创建</button>
    <button class="btn" v-permission="'goods:edit'">编辑</button>
    <button class="btn" v-permission="'goods:delete'">删除</button>
  </div>
</template>

store/index.ts

 state(){
        return{

            user: {
                perms:["user:goods:create",
                    // 'user:goods:edit',
                    "user:goods:delete",]
            },
    
    },

main.ts中定义自定义指令

app.directive("permission",{
    mounted(el, binding) {//自定义钩子函数
          localStorage.setItem("userId", "user");
    // mock 后台返回的权限列表
    // 使用自定义指令，实现按钮级权限控制 简写方式
    const userId = localStorage.getItem("userId") as string;
        let val = binding.value;//获取v-permission传递过来的值
        console.log(store.state)
        const permissionList = store.state.user.perms || [];//[]作用是防止空指针异常，获取用户有哪些权限
        console.log(permissionList)
        if(-1===permissionList.indexOf(`${userId}:${val}`)){//判断有没权限
            //没有权限
            el.remove?.()
        }
    }
})