I'm creating a freemium web app. I have certain actions that require the user to log in. I would like to show a login modal if they click a button for one of these feature
I'm trying to think of the best way to go about it.
I could use a custom directive v-requires-sign-in that I could put on any element and if the user clicks it'll check if the user is logged in and if not show the login modal.
<button v-requires-sign-in @click="premiumFeatureClickHandler">Premium Feature</button>
Advantages : Clean templates
Disadvantages : The only way I can think to implement this is to manipulate the dom manually and insert a parent element that handles showing the login modal in the directive hooks and use capture mode on the event handler on the child element
I could create a component RequiresSignIn that just wraps the element and uses a slot
<requires-sign-in> <button @click="premiumFeatureClickHandler"></button> </requires-sign-in>
Advantages: No manual dom manipulation
Plugin or Mixin
Or I could use a plugin or a mixing that exposes a higher-order function that wraps the click handler of the element.
<button v-requires-sign-in @click="requiresSignIn(premiumFeatureClickHandler)">Premium Feature</button>
Advantages: Quite clean from template vue
Disadvantages: Did a quick test with a plugin and returning the function didn't seem to work and I'd imagine this would be called on create and not every time the click handler is called.
What is the best way to tackle this problem?
Read more here: https://stackoverflow.com/questions/66995984/vue-sign-in-guard