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

Question

<p>SO社区，</p> <p>我正在尝试在现有的Vue 2应用程序中添加外部身份验证。我遇到的问题是，当外部IdP重定向回Vue应用程序并带有路径<code>/redirect</code>时，Vue Router似乎不会遵守更新后的路径并路由到正确的组件。换句话说，Vue Router会将路由到<code>/</code>组件而不是<code>/redirect</code>组件。</p> <p>Vue Router设置了<code>mode: 'history'</code>和Webpack设置了<code>historyApiFallback: true,</code>。</p> <h1>当前行为：</h1> <ol> <li>用户导航到<code>https://localhost:8080/</code>并呈现<code>Login</code>组件。</li> <li>用户输入其ID并被重定向到外部IdP。</li> <li>成功验证后，IdP返回到指定的重定向URL：<code>https://localhost:8080/redirect</code></li> <li>由于历史模式，Webpack将浏览器发送到<code>/</code>，从而返回到<code>Login</code>组件。</li> <li>在<code>Login</code>组件中，<code>mounted()</code>钩子检查<code>if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });</code></li> <li>Vue Router转到<code>/</code>路径，而不是<code>/redirect</code>和其组件。</li> </ol> <h2>技术细节：</h2> <p>Vue - 2.5.15</p><p> 视图路由器 - 3.0.0</p><p> Webpack - 4.17.1</p><p> Webpack 开发服务器 - 3.1.4

<代码>webpack.dev.js

devServer: {
  HistoryApiFallback: true,</pre>
<代码>router.js
const router = new VueRouter({
  模式：“历史”，
  路线：[

...

    {
      路径：'/重定向'，
      组件：重定向，
    },
    {
      小路： '/'，
      重定向：() => {

    },

...

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

  if (toPath === '/redirect') 返回
});</pre>
App.vue
new Vue({
  el: '#login',
  渲染：h => h(登录),
  店铺，
})</pre>
<h2><代码>登录.vue</code></h2>
mounted() {
  if (window.location.pathname === '/redirect') router.push({ 路径: '/redirect' });
}</pre>
<p>请告诉我是否需要提供任何其他细节或代码。提前感谢您的帮助。</p>            

Answer 1

所以，问题似乎出现在顶层组件 Login 在路由器启动之前充当交通警察的角色。我不得不编辑 Login 组件以手动挂载 Redirect 组件。

我不建议这种设置方式。