<p>SO コミュニティ、</p> <p>既存の Vue 2 アプリケーションに外部認証を追加しようとしています。私が抱えている問題は、外部 IdP がパス <code>/redirect</code> を使用して Vue アプリケーションにリダイレクトするときに、Vue Router が更新されたパスと正しいコンポーネントへのルートを尊重していないように見えることです。 。つまり、Vue Router は、<code>/redirect</code> コンポーネントではなく、<code>/</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') ルーター.push({ path: '/redirect' });</code></li> <li>Vue Router は、<code>/redirect</code> とそのコンポーネントではなく、<code>/</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({ モード: '履歴'、 ルート: [ ... { パス: '/リダイレクト'、 コンポーネント: リダイレクト、 }、 { パス： '/'、 リダイレクト: () => { }、 ... router.beforeEach((to、from、next) => { 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: '#ログイン', レンダリング: h => h(ログイン)、 店、 })</pre> <h2><code>登录.vue</code></h2> <pre class="brush:php;toolbar:false;">mounted() { if (window.location.pathname === '/redirect') router.push({ path: '/redirect' }); }</pre> <p>その他のヘルプやコードを提供する必要があるかどうかを報告します。