Gestion des redirections externes Vue Router (mode historique) et Webpack
<p>Communauté SO,</p>
<p>J'essaie d'ajouter une authentification externe à une application Vue 2 existante. Le problème que je rencontre est que lorsque l'IdP externe redirige vers l'application Vue avec le chemin <code>/redirect</code>, le routeur Vue ne semble pas respecter le chemin mis à jour et l'itinéraire vers le bon composant. . En d'autres termes, Vue Router acheminera vers le composant <code>/</code> au lieu du composant <code>/redirect</code> </p>
<p>Vue Router définit le <code>mode : 'history'</code> et Webpack définit le <code>historyApiFallback : true,</code>. </p>
<h1>Comportement actuel : </h1>
<ol>
<li>L'utilisateur accède à <code>https://localhost:8080/</code> et le composant <code>Login</code> ≪/li>
<li>L'utilisateur saisit son identifiant et est redirigé vers l'IdP externe. ≪/li>
<li>Une fois l'authentification réussie, l'IdP revient à l'URL de redirection spécifiée : <code>https://localhost:8080/redirect</code></li>
<li>En raison du mode historique, Webpack envoie le navigateur vers <code>/</code>, qui renvoie le composant <code>Login</code> ≪/li>
<li>Dans le composant <code>Login</code>, <code> Mounted()</code> hook check<code>if (window.location.pathname === '/redirect') .push({ chemin : '/redirect' });</code></li>
<li>Vue Router accède au chemin <code>/</code> au lieu de <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 开发服务器 - 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({
mode : 'historique',
itinéraires : [
...
{
chemin : '/redirection',
composant : Redirection,
},
{
chemin: '/',
redirection : () => {
},
...
router.beforeEach((vers, depuis, suivant) => {
const utilisateur = store.state.user.authorizedUser
const versPath = vers.chemin
si (toPath === '/redirect') retourne
});</pré>
<h2><code>App.vue</code></h2>
<pre class="brush:php;toolbar:false;">nouvelle Vue({
el : '#login',
rendu : h => h(Connexion),
magasin,
})</pré>
<h2><code>登录.vue</code></h2>
<pre class="brush:php;toolbar:false;">monté() {
if (window.location.pathname === '/redirect') router.push({ chemin : '/redirect' });
}</pré>
<p>
