vue3 让点击事件自行判断是否登录

业务场景

一个网站有的功能无需登录也能使用，如浏览新闻、观看视频，有的功能需要登录才能使用，如收藏、点赞、关注。这些按钮的功能不像某些入口链接，如个人中心或收藏夹，可以使用路由守卫进行统一拦截。一般都是在点击的代码里自行判断，感觉这是个可以封装的业务，所以想办法解决一下，不清楚点击事件有没有拦截机制，这里用vue的自定义指令实现一下，这篇博客基于vue3实现，不过跟vue2差不多，不过是绑定时使用的生命周期钩子不一样罢了。

代码

• 使用

<button v-login="collect">点我收藏</button>

• 全局注册（如果需要你也可以组件内注册，代码大同小异）

const verifyLogin = (binding: DirectiveBinding) => {
    // 这里自行判断是否登录，入如果没登陆应该做出提示
    if(isLogin){
        binding.value();
    }
}
let verifyFun;
app.directive('login',{
    // vue2中对应bind
    mounted:(el,binding) => {
        console.log('***********mounted***********')
        verifyFun = verifyLogin.bind(null,binding);
        el.addEventListener('click',verifyFun)
    },
    // vue2中对应unbind
    unmounted:(el,binding) => {
        console.log('***********unmounted***********')
        el.removeEventListener('click',verifyFun)
    }
})

注意事项

指令里判断没登录时应该做出提示

补充

1. 带参调用

<button v-login="()=>{collect('123')}">点我收藏</button>