Vue Router（历史模式）和 Webpack 外部重定向处理

Question

SO 社区，

我正在努力为现有的 Vue 2 应用程序添加外部身份验证。我面临的问题是，在外部 IdP 重定向回路径为 /redirect 的 Vue 应用程序后，Vue 路由器似乎不支持更新的路径和路由到正确的组件。换句话说，Vue Router 路由到 / 组件而不是 /redirect 组件。

Vue Router 确实设置了 mode: 'history' 和 Webpack historyApiFallback: true, 设置。

当前行为：

用户导航到 https://localhost:8080/ 并呈现 Login 组件。
用户输入他们的 ID 并被重定向到外部 IdP。
身份验证成功后，IdPreturns到指定重定向URL：https://localhost:8080/redirect
由于历史模式，Webpack 将浏览器发送到 /，从而返回到 Login 组件。
在 Login 组件中，mounted() 钩子检查 if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });
Vue Router 转到 / 路径，而不是 /redirect 及其组件。

技术细节：

Vue-2.5.15
Vue 路由器 - 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,
})

`Login.vue`

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

如果我可以提供任何其他详细信息或代码，请告诉我。预先感谢您的帮助。

Answer 1

因此，问题似乎出在顶级组件 Login 在路由器启动之前充当交通警察。我不得不编辑 Login 组件以手动安装 Redirect组件。

我不建议这种设置。

Vue Router（历史模式）和 Webpack 外部重定向处理

Vue Router (History Mode) & Webpack External Redirect Handling

vue.js

redirect

webpack

vue-router

webpack-dev-server