自定义指令实现在未登录状态下，调用登录弹窗实现登录功能

前言

公司做自己的门户网站来做宣传,产品的设计理念是门户网站就是先让用户看到公司是做什么的，如果有想法再进行联系。这样就导致登录不再是跳转到新页面，而是以弹框的形式出现。

实现思路

• 第一个：vue3的自定义指令
• 第二个：使用pinia/vuex + js方法实现

代码实现

使用vue3自定义指令实现

import { getToken } from '@/utils/auth'

import useUserStore from '@/store/user'

/**
 * 权限指令 
 * 
 * 使用方法：
 *   v-jurisdiction:login--判断是否登录
 *  --如果 v-jurisdiction:login="ctm"  则判断是否登录，如果登录则执行ctm函数
 *  --如果  v-jurisdiction:login="()=> ctm(123)" 传值
 *        
 */
export default {
    mounted(el, binding, vnode) {
        const userStioe = useUserStore()
        el.addEventListener('click', () => {
              //arg可以不判断--只是公司代码风格要求
            if (binding.arg === 'login') {
                if (!getToken()) {
                    userStioe.setLoginShow(true)
                } else {
                    //判断回调是否是一个方法
                    if (binding.value && typeof binding.value === 'function') {
                         //执行
                        binding.value()
                    }
                }
            }
        })
    }
}

使用pinia/vuex + js方法实现

这种方式 用在了 uniapp上 在uniapp上为啥不用自定义指令是因为微信小程序不支持

// 判断是否登录
export const toLogin = (callback) => {
	if (getToken()) {
		if (callback && typeof callback === 'function') {
			callback()
		}
	} else {
		uni.showModal({
			title: '提示',
			content: '暂未登录，请登录后操作',
			success: (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				} else if (res.cancel) {}
			}
		});
	}
}