Vue Router (History Mode) & Webpack External Redirect Handling

Question

SO Community,

I am working to add external authentication with an existing Vue 2 application. The issue I am facing is that after the external IdP redirects back to the Vue application with the path of /redirect, Vue Router does not appear to honor the updated path and route to the proper component. In other words, Vue Router routes to the / component rather than the /redirect component.

Vue Router does have mode: 'history' set and Webpack historyApiFallback: true, set.

Current Behavior:

1. User navigates to https://localhost:8080/ and renders a Login component.
2. User enters their ID and is redirected to the external IdP.
3. After successful authentication, the IdP returns to the specified redirect URL: https://localhost:8080/redirect
4. Because of history mode, Webpack sends the browser to / and thus back to the Login component.
5. In the Login component, the mounted() hook checks if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });
6. Vue Router goes to the / path, rather than /redirect and its component.

Technical Details:

Vue - 2.5.15
Vue Router - 3.0.0
Webpack - 4.17.1
Webpack Dev Server - 3.1.4

webpack.dev.js

devServer: {
  historyApiFallback: true,

router.js

const router = new VueRouter({
  mode: 'history',
  routes: [

...

    {
      path: '/redirect',
      component: Redirect,
    },
    {
      path: '/',
      redirect: () => {

    },

...

router.beforeEach((to, from, next) => {
  const user = store.state.user.authorizedUser
  const toPath = to.path

  if (toPath === '/redirect') return
});

App.vue

new Vue({
  el: '#login',
  render: h => h(Login),
  store,
})

Login.vue

mounted() {
  if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });
}

Please let me know if I can provide any additional details or code. Thank you, in advance, for the help.

Answer 1

So, the issue appeared to be with the top-level component Login acting as a traffic cop before the router kicked in. I had to edit the Login component to manually mount the Redirect component.

I wouldn't advise this type of setup.