我希望通过显示弹出窗口来向未经身份验证的用户登录/注册来保护某些需要身份验证的操作。
我想要这样的东西：
<button require-auth>Like</button>
当您单击它而未经过身份验证时，会出现一个弹出框(我正在使用 Bootstrap Vue 弹出窗口(，告诉您登录以继续。
为此，我创建了一个自定义指令，用于侦听 click 事件并检查用户的身份验证状态。问题是我不知道如何从那里实例化弹出组件并显示它。
实际上这是我尝试过的没有成功的：
export const Authenticated: DirectiveOptions = {
bind (el, binding, vnode) {
el.addEventListener('click', (event) => {
if (store.getters['users/authenticated']) {
return;
}
event.preventDefault();
const node = document.createElement('div');
const placement = get(binding, 'value', 'auto');
const template = `
<p>Vous devez être connecté pour effectuer cette action</p>
<div>
<b-button block :to="{ name: 'login' }">Se connecter</b-button>
<b-button block :to="{ name: 'register' }">S'inscrire</b-button>
</div>`;
const popover = new BPopover({
propsData: { target: el, placement },
});
popover.$slots.default = [template as any];
popover.$slots.title = ['Connexion requise' as any];
popover.$mount(node);
popover.$emit('open');
console.log(popover.$el) // which log : <---->
})
},
};
我知道我可以用一个组件来做到这一点，但我希望它适用于任何类型的按钮，这样做我将不得不使用一个插槽并在div 内包装，这会破坏页面的结构。
如何正确触发弹出框？
在弹出框中：v-if="notAuthenticated"
在按钮上：@click="checkAuth"
在钩子中：
data() {
return {
notAuthenticated: false
}
},
methods: {
checkAuth () {
if (this.isAuthenticated)
//do whatever
} else {
this.notAuthenticated= true;
}
}
}
并在弹出框关闭、单击按钮等时notAuthenticated更改回来。