Umgang mit externen Weiterleitungen von Vue Router (Verlaufsmodus) und Webpack

Question

SO Community,

Ich versuche, einer vorhandenen Vue 2-Anwendung eine externe Authentifizierung hinzuzufügen. Das Problem, das ich habe, besteht darin, dass der Vue-Router den aktualisierten Pfad und die Route zur richtigen Komponente nicht zu berücksichtigen scheint, wenn der externe IdP mit dem Pfad /redirect zurück zur Vue-Anwendung umleitet . Mit anderen Worten: Vue Router leitet an die Komponente / weiter und nicht an die Komponente /redirect

Vue Router legt mode: 'history' fest und Webpack legt historyApiFallback: true, fest.

Aktuelles Verhalten:

1. Der Benutzer navigiert zu https://localhost:8080/ und die Komponente Login
2. Der Benutzer gibt seine ID ein und wird zum externen IdP weitergeleitet.
3. Nach erfolgreicher Authentifizierung kehrt der IdP zur angegebenen Weiterleitungs-URL zurück: https://localhost:8080/redirect
4. Aufgrund des historischen Modus sendet Webpack den Browser an /, was die Komponente Login zurückgibt.
5. In der Login-Komponente überprüfen Sie den Hook montiert()if (window.location.pathname === '/redirect'). .push({ path: '/redirect' });
6. Vue Router geht zum /-Pfad anstelle von /redirect

技术细节:

Vue - 2.5.15

路由器视图 - 3.0.0

Webpack – 4.17.1

Webpack-Version – 3.1.4

webpack.dev.js

devServer: {
  HistoryApiFallback: true,

router.js

const router = new VueRouter({
  Modus: 'Geschichte',
  Routen: [

...

    {
      Pfad: '/redirect',
      Komponente: Weiterleiten,
    },
    {
      Weg: '/',
      umleiten: () => {

    },

...

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

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

App.vue

new Vue({
  el: '#login',
  rendern: h => h(Anmelden),
  speichern,
})

登录.vue

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

Answer 1

所以，问题似乎出现在顶层组件 Login 在路由器启动之前充当交通警察的角色。我不得不编辑 Login 组件以手动挂载 Redirect 组件。

我不建议这种设置方式。