Comment masquer les paramètres de la barre d'adresse dans Vue.js

Lors de l'utilisation de Vue.js pour développer des projets front-end, le traitement des paramètres de la barre d'adresse URL est un problème très basique mais important. Dans de nombreux cas, nous devons obtenir des paramètres de l'URL. Par exemple, lorsque nous passons de la page précédente à la page actuelle, nous devons transmettre certaines informations à cette page. Dans ce cas, nous devons transmettre ces informations à l'URL. sous forme de paramètres. Cependant, ces paramètres doivent parfois être masqués. Après tout, les informations sensibles contenues dans l'URL ne doivent pas être facilement divulguées, c'est pourquoi cet article explique comment masquer les paramètres de la barre d'adresse dans Vue.js.

1. Routage dynamique

Tout d'abord, nous pouvons masquer les paramètres dans la barre d'adresse grâce au routage dynamique de Vue.js. Le routage dynamique est une technique qui mappe les paramètres de l'URL aux composants réels affichés. Par exemple, nous supposons qu'il existe une page de liste d'articles. Chaque article a un identifiant unique pour identifier cet article. Nous pouvons utiliser cet identifiant comme paramètre de route, puis lire cet identifiant dans le composant et l'utiliser pour l'obtenir. les informations sur l'article correspondant.

Plus précisément, nous pouvons d'abord définir un itinéraire dynamique dans la configuration du routage et définir un certain segment du chemin de l'itinéraire (comme l'ID de l'article) comme paramètre dynamique :

const router = new VueRouter({
  routes: [
    {
      path: '/article/:id',
      name: 'Article',
      component: Article
    }
  ]
})

Dans cet exemple, :id est un paramètre dynamique représentant l'ID de l'article. Dans le composant correspondant, on peut obtenir la valeur de ce paramètre via <code>$route.params.id : :id 就是一个动态参数，表示文章的 ID。在对应的组件中，我们可以通过 $route.params.id 来获取这个参数的值：

export default {
  mounted () {
    console.log(this.$route.params.id)
  }
}

这样，在用户访问这个路由时，即可在组件中获取到参数的值，而 URL 中并不会显示这个参数。

二、Query 参数

除了使用动态路由，我们还可以通过 Query 参数来隐藏地址栏中的参数。Query 参数是一种通过 ? 分隔的键值对，可以将各种参数以字符串的方式传递给 URL。

举个例子，我们假设有一个搜索页，需要在搜索时将用户输入的关键词传递给服务器来获取匹配的结果，可以将输入的关键词作为 Query 参数，然后在路由组件中获取和解析这个参数：

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      name: 'Search',
      component: Search
    }
  ]
})

// 当用户在输入框中输入搜索关键词时
this.$router.push({
  name: 'Search',
  query: { keyword: '关键词' }
})

export default {
  mounted () {
    console.log(this.$route.query.keyword)
  }
}

在这个例子中，query 选项表示传递的参数。然后在组件中可以通过 $route.query.keywordrrreee

De cette façon, lorsque l'utilisateur accède à cette route, le paramètre peut être obtenu dans le composant valeur, et ce paramètre ne sera pas affiché dans l’URL.

2. Paramètres de requête

En plus d'utiliser le routage dynamique, nous pouvons également utiliser les paramètres de requête pour masquer les paramètres dans la barre d'adresse. Les paramètres de requête sont des paires clé-valeur séparées par ?, qui peuvent transmettre divers paramètres à l'URL sous forme de chaînes.

Par exemple, nous supposons qu'il existe une page de recherche et que les mots-clés saisis par l'utilisateur doivent être transmis au serveur lors de la recherche pour obtenir des résultats correspondants. Les mots-clés saisis peuvent être utilisés comme paramètres de requête, puis obtenus et analysés. dans le composant de routage. Ce paramètre :

rrreee

Dans cet exemple, l'option query représente le paramètre passé. Ensuite, vous pouvez obtenir la valeur de ce paramètre via $route.query.keyword dans le composant. De cette façon, les paramètres réellement transmis ne seront pas visibles dans l’URL.

3. Utiliser des paramètres cryptés dans l'URL🎜🎜En plus des deux méthodes ci-dessus, nous pouvons également utiliser des paramètres cryptés dans l'URL pour masquer les paramètres de la barre d'adresse. Plus précisément, nous pouvons chiffrer les paramètres avant de les transmettre à l'URL, de sorte que même si l'URL est interceptée par d'autres, les valeurs réelles des paramètres ne peuvent pas être facilement analysées. 🎜🎜Il existe de nombreuses façons de chiffrer, et vous pouvez utiliser des algorithmes tels que le chiffrement symétrique (tel que DES, AES) ou asymétrique (tel que RSA) pour le chiffrement. Pas beaucoup d'introduction ici. 🎜🎜Lorsque vous utilisez des paramètres chiffrés dans Vue.js, vous pouvez écrire les paramètres chiffrés dans un stockage local tel que Cookie ou LocalStorage, puis laisser les pages suivantes lire ces données et les déchiffrer. Cela garantit que les paramètres chiffrés sont uniquement affichés dans le stockage local et ne sont pas exposés à l'URL. La seule chose à noter est que la longueur du paramètre crypté doit être inférieure à la longueur du paramètre de texte en clair, sinon le cookie et les autres mémoires seront trop volumineux. 🎜🎜Ci-dessus, vous trouverez trois façons de masquer les paramètres de la barre d'adresse dans Vue.js. Quelle que soit la méthode utilisée, nous devons nous assurer que les valeurs des paramètres dans l'URL sont masquées autant que possible tout en garantissant la sécurité. Certes, ce n’est pas simple, mais dans la réalité du développement, cette problématique est très importante pour certaines données sensibles. 🎜

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!