Handling Vue Router (history mode) and Webpack external redirects

Question

SO Community,

I'm trying to add external authentication to an existing Vue 2 application. The problem I'm having is that when the external IdP redirects back to the Vue application with the path /redirect, the Vue Router doesn't seem to respect the updated path and route to the correct component. In other words, Vue Router will route to the / component instead of the /redirect component.

Vue Router sets mode: 'history' and Webpack sets historyApiFallback: true,.

Current behavior:

1. The user navigates to https://localhost:8080/ and the Login component is rendered.
2. The 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. Due to historical mode, Webpack sends the browser to /, which returns the Login component.
5. In the Login component, mounted() hook checkif (window.location.pathname === '/redirect') router.push({ path: '/redirect' });
6. Vue Router goes to the / path instead of /redirect and its components.

技术细节：

Vue - 2.5.15

路由器视图 - 3.0.0

Webpack - 4.17.1

Webpack 开发服务器 - 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,
})

登录.vue

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

请告诉我是否需要提供任何其他细节或代码。提前感谢您的帮助。

Answer 1

So, the problem seems to be with the top-level component Login acting as a traffic cop before the router boots up. I had to edit the Login component to mount the Redirect component manually.

I don’t recommend this setting.