Add vue router guard

[michaelrodriguezGL]

Requirements

• I have added test coverage for new or changed functionality
• I have followed the repository's pull request submission guidelines
• I have validated my changes against all supported platform versions. (Which are the supported platforms?)

Related issues
None.

Describe the solution you've provided

• These changes enable guard usage within the Vue Router library.
• It makes available the Launch Darkly instance which enables cross-sharing functionality.
• It makes available the Launch Darkly instance readiness which enables cross-sharing functionality.
• launchDarklyGuard:
  • Can be used to check a specific flag value and avoid page interaction if the result is false

  import { launchDarklyGuard } from "launchdarkly-vue-client-sdk";
  
  export const routes = [
    {
      path: "/my-route",
      name: "my-route",
      component: MyComponent,
      beforeEnter: launchDarklyGuard("CUSTOM_KEY"),
    },
  ];

  • Can be used to apply custom logic by passing a callback parameter:

  import { launchDarklyGuard } from "launchdarkly-vue-client-sdk";
  
  export const launchDarklyCustomGuard = launchDarklyGuard("CUSTOM_KEY", (flag, to, from, next) => {
    /** to, from, next <-- Values from router https://router.vuejs.org/api/interfaces/NavigationGuard.html */
  
    if (flag) { /** <-- returned value from Launch Darkly */
      return /** Here you can return true, false, or a route */
    }
  
    return /** Here you can return true, false, or a route */
  });

Describe alternatives you've considered
Component-based guard https://github.com/dashhudson/vue-ld#ldrouteguard-component

Additional context
Guard-based validation helps to reduce the amount of feature flags logic across components, it gives a centralized way of controlling page access.

I hope this sparks a conversation around Vue guards in LD :)

[yusinto]

Thank you for the PR @michaelrodriguezGL. We will review and discuss internally and respond again soon.

[michaelrodriguezGL]

Thank you for the PR @michaelrodriguezGL. We will review and discuss internally and respond again soon.

Thanks, @yusinto.

[michaelrodriguezGL]

Hi @yusinto, is there any news?

[michaelrodriguezGL]

Hi @yusinto, is there any news? Anything I can help with?

[yusinto]

Hi @michaelrodriguezGL apologies for the delay. We will take a look at this this week or the next. Thank you for your patience.

[michaelrodriguezGL]

Hi @yusinto, thank you! I'm looking forward to your feedback

[louis-launchdarkly]

Hello @michaelrodriguezGL, the team had just discussed this and this seems like a good idea. As you may have noticed from other LaunchDarkly SDKs, we are in the progress of doing major releases to support Context, so we are considering adopting this change when we start the Vue SDK major version work. For now, we have put this on the Vue SDK backlog.

Filed internally as 192072.

[michaelrodriguezGL]

@louis-launchdarkly Sounds good, thanks for the update.

[sk-tjdownes]

There hasn't been any movement on this issue in a while, but I think this is important to Vue engineers using LD. Being able to protect an entire route seems a lot easier than flagging individual components.

[clarepure]

Would be beneficial to have this

[Hawxy]

@louis-launchdarkly Context has been released for a while now, is there any update on this?

[rich-field]

This seems like a particularly powerful and useful feature to have, any update on this?

[kinyoklion]

I think this breaks scoping/encapsulation. As this ref would be the same even with two apps both using the LDPlugin.

Where the provide/inject for the built-in ready and client theoretically would be scoped.

I think that route guards support inject as of vue 3.3. https://router.vuejs.org/guide/advanced/navigation-guards.html#Global-injections-within-guards

I need to look into what the implications of us upgrading would be.

I think, in that case, useLDClient and useLDReady could be used without duplicating these refs and without causing a scope problem.