requireAuthOnInitialize not working and no docs on how to use with routes

[gcacars]

Certain routes in my application require authentication. And I don't know how to make it work with routes.
So, I set the requireAuthOnInitialize option in the plugin and set it to true, but it doesn't work either.
The browser shows an error when I open it:

How can I set authentication per route to avoid visual flick?

[Option 1]

  {
    path: '/explorer',
    name: 'Explorer',
    component: () => import(/* webpackChunkName: "explorer" */ '../views/LogExplorer.vue'),
    beforeRouteEnter(to from, next) {
      if (!this.$msal || !this.$msal.isAuthenticated()) {
        this.$msal.signIn();
      }
    }
  },

It is not possible to use this and vue-msal does not export these methods.

[Option 2]

Vue.use(msal, {
  auth: {
    clientId: process.env.VUE_APP_CLIENT_ID,
    requireAuthOnInitialize: true,
  },
  graph: {
    callAfterInit: false,
  },
});

[daglenn1960]

Observation: we ran into this same issue using simple/default Vue.js app.

What we observed was that not explicitly setting a "redirectUri" value gives an incorrect redirectUri to the MS auth flow. We were seeing the following (and the iframe/allow-top-navigation error above), which is missing the required '&' to delineate the initial id_token parm:

http://localhost:8080/#id_token=eyJ0eXAiOiJKV

What we changed to get a working redirectUri was explicitly setting 'redirect Uri' with:

auth: {
    redirectUri: "http://localhost:8080",

and now the correct redirectUri (with & before the id_token parm) is passed to MS auth flow correctly, and redirects back correctly.

Could this be an issue/bug with a default redirectUri vs explicitly set redirectUri?