Vue Router (履歴モード) および Webpack 外部リダイレクトの処理

Question

SO コミュニティ、

既存の Vue 2 アプリケーションに外部認証を追加しようとしています。私が抱えている問題は、外部 IdP がパス /redirect を使用して Vue アプリケーションにリダイレクトするときに、Vue Router が更新されたパスと正しいコンポーネントへのルートを尊重していないように見えることです。 。つまり、Vue Router は、/redirect コンポーネントではなく、/ コンポーネントにルーティングします。

Vue Router は mode: 'history' を設定し、Webpack は historyApiFallback: true, を設定します。

現在の動作:

1. ユーザーが https://localhost:8080/ に移動すると、Login コンポーネントが表示されます。
2. ユーザーが自分の ID を入力すると、外部 IdP にリダイレクトされます。
3. 認証が成功すると、IdP は指定されたリダイレクト URL に戻ります: https://localhost:8080/redirect
4. ヒストリカル モードのため、Webpack はブラウザを / に送信し、Login コンポーネントを返します。
5. Login コンポーネントで、mounted() フックチェックif (window.location.pathname === '/redirect') ルーター.push({ path: '/redirect' });
6. Vue Router は、/redirect とそのコンポーネントではなく、/ パスに移動します。

技术节：

Vue - 2.5.15

路ルータービデオ - 3.0.0

Webpack - 4.17.1

Webpack 公開サーバー - 3.1.4

webpack.dev.js

devServer: {
  HistoryApiFallback: true、

router.js

const router = new VueRouter({
  モード: '履歴'、
  ルート: [

...

    {
      パス: '/リダイレクト'、
      コンポーネント: リダイレクト、
    }、
    {
      パス： '/'、
      リダイレクト: () => {

    }、

...

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

  if (toPath === '/redirect') return
});

App.vue

new Vue({
  el: '#ログイン',
  レンダリング: h => h(ログイン)、
  店、
})

登录.vue

mounted() {
  if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });
}

その他のヘルプやコードを提供する必要があるかどうかを報告します。

Answer 1

つまり、問題は、ルータが起動する前に交通警官として機能する最上位コンポーネント Login にあるようです。 Login コンポーネントを編集して、Redirect コンポーネントを手動でマウントする必要がありました。

この設定はお勧めしません。