Umgang mit externen Weiterleitungen von Vue Router (Verlaufsmodus) und Webpack
<p>SO Community,</p>
<p>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 <code>/redirect</code> zurück zur Vue-Anwendung umleitet . Mit anderen Worten: Vue Router leitet an die Komponente <code>/</code> weiter und nicht an die Komponente <code>/redirect</code> </p>
<p>Vue Router legt <code>mode: 'history'</code> fest und Webpack legt <code>historyApiFallback: true,</code> fest. </p>
<h1>Aktuelles Verhalten: </h1>
<ol>
<li>Der Benutzer navigiert zu <code>https://localhost:8080/</code> und die Komponente <code>Login</code> </li>
<li>Der Benutzer gibt seine ID ein und wird zum externen IdP weitergeleitet. </li>
<li>Nach erfolgreicher Authentifizierung kehrt der IdP zur angegebenen Weiterleitungs-URL zurück: <code>https://localhost:8080/redirect</code></li>
<li>Aufgrund des historischen Modus sendet Webpack den Browser an <code>/</code>, was die Komponente <code>Login</code> zurückgibt. </li>
<li>In der <code>Login</code>-Komponente überprüfen Sie den Hook <code>montiert()<code>if (window.location.pathname === '/redirect'). .push({ path: '/redirect' });</code></li>
<li>Vue Router geht zum <code>/</code>-Pfad anstelle von <code>/redirect</code></li>
</ol>
<h2>技术细节:</h2>
<p>Vue - 2.5.15</p><p>
路由器视图 - 3.0.0</p><p>
Webpack – 4.17.1</p><p>
Webpack-Version – 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({
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
});</pre>
<h2><code>App.vue</code></h2>
<pre class="brush:php;toolbar:false;">new Vue({
el: '#login',
rendern: h => h(Anmelden),
speichern,
})</pre>
<h2><code>登录.vue</code></h2>
<pre class="brush:php;toolbar:false;">montiert() {
if (window.location.pathname === '/redirect') router.push({ path: '/redirect' });
}</pre>
<p>
