Parlons de la façon de masquer les paramètres de routage de Vue

Vue est un framework JavaScript populaire largement utilisé pour le développement front-end. Vue Router est son outil officiel de gestion de routage, qui permet aux développeurs d'implémenter facilement la fonction de routage de SPA (Single Page Application). Dans Vue Router, nous utilisons généralement des paramètres de routage pour changer de page dynamiquement. Cependant, dans certains scénarios spécifiques, nous devrons peut-être masquer et chiffrer les paramètres de routage. Cet article vous expliquera comment masquer les paramètres de routage dans Vue.

1. Utilisation de base des paramètres de routage

Dans Vue Router, les paramètres de routage sont définis en utilisant un préfixe deux-points, par exemple :

{ path: '/user/:id', component: User }

Dans le code ci-dessus, nous définissons un paramètre de routage nommé "id", qui peut afficher dynamiquement les informations utilisateur correspondantes lorsque l'utilisateur accède à "/user/1". Dans le composant, nous pouvons accéder à la valeur des paramètres de routage actuels via $route.params, par exemple :

const User = {
  template: '<div>{{ $route.params.id }}</div>'
}

2. Masquage des paramètres de routage

Dans le développement actuel, nous souhaitons parfois masquer les paramètres de routage, tels que l'identifiant de l'utilisateur. est crypté. Cela peut améliorer la sécurité du système et empêcher les utilisateurs d'accéder aux données d'autres personnes en altérant les paramètres d'URL. Afin de réaliser la fonction de masquage des paramètres de routage, nous pouvons utiliser la fonction "Path Parameter Rewrite (Rewrite)" fournie par Vue Router. Concrètement, nous pouvons redéfinir la valeur du paramètre de routage en ajoutant la fonction beforeEnter dans la configuration de routage, par exemple :

{ 
  path: '/user/:id', 
  component: User,
  beforeEnter: (to, from, next) => {
    // 将id进行加密
    const id = encrypt(to.params.id)
    next({ path: `/user/${id}` })
  }
}

Dans le code ci-dessus, nous définissons une fonction nommée "beforeEnter", qui sera utilisée lorsque l'utilisateur accédera au l'itinéraire a déjà été appelé. Dans cette fonction, nous chiffrons les paramètres de routage d'origine et modifions le chemin de l'itinéraire de saut vers la valeur du chemin crypté via la fonction suivante, masquant ainsi les paramètres de routage.

3. Décryptage des paramètres de routage

Lorsque les paramètres de routage sont masqués, nous devons décrypter les paramètres de routage dans le composant pour obtenir les valeurs réelles des paramètres. Afin de réaliser cette fonction, nous pouvons décrypter les paramètres de routage dans la fonction de cycle de vie créée du composant, par exemple :

const User = {
  template: '<div>{{ realId }}</div>',
  data() {
    return {
      realId: ''
    }
  },
  created() {
    // 获取加密后的id路由参数
    const id = this.$route.params.id
    // 解密id
    this.realId = decrypt(id)
  }
}

Dans le code ci-dessus, nous obtenons les paramètres de routage cryptés via la fonction de cycle de vie créée, et les transmettons via le La fonction de décryptage decrypt le convertit en paramètre réel et enregistre la valeur déchiffrée dans la variable d'instance realId du composant. Dans le modèle, nous pouvons afficher les valeurs réelles des paramètres de routage via la variable realId.

4. Résumé

En utilisant la fonction de réécriture des paramètres de chemin, nous pouvons facilement masquer et décrypter les paramètres de routage de Vue. Cette technologie peut améliorer la sécurité du système et éviter des problèmes inutiles. En cours de développement, nous pouvons également combiner des cookies, des sessions et d'autres technologies pour améliorer encore la sécurité du système.

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!