【问题标题】：Vue Router (History Mode) & Webpack External Redirect HandlingVue 路由器（历史模式）和 Webpack 外部重定向处理
【发布时间】：2021-10-20 09:55:54
【问题描述】：

SO 社区，

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

Vue 路由器确实有 mode: 'history' 设置和 Webpack historyApiFallback: true, 设置。

当前行为：

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

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

【问题讨论】：

标签： vue.js redirect webpack vue-router webpack-dev-server

【解决方案1】：

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

我不建议这种类型的设置。

【讨论】：