Vue Router (履歴モード) および Webpack 外部リダイレクトの処理
<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>その他のヘルプやコードを提供する必要があるかどうかを報告します。