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

devServer: { HistoryApiFallback: true,

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 });

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

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