Comment gérer les problèmes spéciaux d'échappement des caractères dans les paramètres de requête URL dans Vue?

Traiter les paramètres de requête de l'URL dans Vue pour une évasion de caractères spéciaux

Dans un seul scénario de connexion, le paramètre URL contient souvent des informations telles que id et key utilisée pour l'authentification. Par exemple, l'URL pourrait être similaire à http://localhost:8088/taxbureaulogin?id=1206&key=ze9 ticzsrej... Le navigateur peut y échapper des caractères spéciaux, par exemple Passer à un espace, / peut également être échappé. Les applications Vue frontal doivent traiter correctement ces caractères spéciaux pour garantir l'intégrité des données.

Habituellement, nous utilisons URLSearchParams pour obtenir des paramètres de requête URL:

 Laissez SearchParams = new UrlSearchParams (Window.Location.Search);

Cependant, les paramètres obtenus par cette méthode peuvent avoir été échappés par le navigateur. Par exemple, ze9 ticzsrejfujj/bxjcq== peut devenir ze9 ticzsrejfujj/bxjcq== .

Solution:

1. Traitement du backend (recommandé): Lorsque le backend génère des jetons, il est recommandé d'utiliser le codage base64url pour éviter Caractères spéciaux tels que, / et = . Il s'agit de la solution idéale qui peut résoudre fondamentalement le problème.

2. Traitement frontal (si le back-end ne peut pas être modifié): le frontal peut utiliser encodeURIComponent pour coder la valeur de jeton obtenue, puis la transmettre à l'arrière-end. Il convient de noter que différentes versions du routeur Vue se comportent différemment:

   • Vue Router 3.x: Vue Router 3.x décodera automatiquement les caractères spéciaux. Les informations d'URL obtenues à l'aide de location.href sont également une chaîne échappée. Les paramètres obtenus par URLSearchParams ont également été décodés. Par conséquent, il est nécessaire d'utiliser l'encodage encodeURIComponent avant de passer au backend.

   • Vue Router 4.x: Vue Router 4.x Optimise le traitement des paramètres d'URL, et le codage des paramètres dans l'attribut $route est plus cohérent. Les valeurs de path et fullPath ne sont plus décodées hash sera décodé. Lorsque vous utilisez des méthodes push , resolve et replace , le chemin doit être codé.

   Le code suivant montre un exemple d'utilisation encodeURIComponent dans le routeur Vue 3.x:

    Laissez SearchParams = new UrlSearchParams (Window.Location.Search);
   LET KEY = SearchParams.get ('key');
   Soit EncodedKey = EncodeuRIComponent (KEY); // passe au backend après le codage

3. Utilisez l'attribut $route (Vue Router 4.x): Dans Vue Router 4.x, utilisez l'attribut $route directement pour obtenir des paramètres sans encodage supplémentaire.

En résumé, il est recommandé de hiérarchiser les méthodes de traitement du backend pour garantir l'intégrité et la sécurité des données. Si le backend ne peut pas être modifié, sélectionnez la méthode de traitement frontale appropriée en fonction de la version du routeur Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!