<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</p> <h2><code>webpack.dev.js</code></h2> <pre class="brush:php;toolbar:false;">devServer: { historyApiFallback: true,</pre> <h2><code>router.js</code></h2> <pre class="brush:php;toolbar:false;">const router = new VueRouter({ mode: 'history', routes: [ ... { path: '/redirect', component: Redirect, }, { path: '/', redirect: () =&gt; { }, ... router.beforeEach((to, from, next) =&gt; { const user = store.state.user.authorizedUser const toPath = to.path if (toPath === '/redirect') return });</pre> <h2><code>App.vue</code></h2> <pre class="brush:php;toolbar:false;">new Vue({ el: '#login', render: h =&gt; h(Login), store, })</pre> <h2><code>登录.vue</code></h2> <pre class="brush:php;toolbar:false;">mounted() { if (window.location.pathname === '/redirect') router.push({ path: '/redirect' }); }</pre> <p>请告诉我是否需要提供任何其他细节或代码。提前感谢您的帮助。</p>