Vue sign in guard

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.

Directive

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

Component

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

Disadvantages:

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

Content Attribution

This content was originally published by patrick_corrigan at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: