处理Vue Router（历史模式）和Webpack外部重定向
<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>