Explication détaillée de la solution au problème de rafraîchissement et de disparition des paramètres de routage vue-router

Cet article présente principalement la solution au problème de la disparition du paramètre de routage vue-router après actualisation. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer au scénario

 : Dans le. application monopage implémentée par vue-router, une fois que la page de connexion appelle l'

interface de connexion, le serveur renvoie les informations utilisateur puis les transmet à la page d'accueil via router.push({name: 'index', params: res.data}) et afficher les données sur la page d'accueil. Mais après avoir actualisé la page, les données ont disparu.

Solution :

1, session& rendu serveur

La solution traditionnelle est que la page de connexion et la page d'accueil sont deux pages distinctes. Après une connexion réussie, le serveur génère une session correspondant aux informations utilisateur, puis restitue les données de la page d'accueil, transmet l'ID de session au navigateur via l'en-tête de réponse et génère. le fichier

cookie correspondant. De cette façon, la prochaine fois que la page sera demandée, le navigateur apportera le cookie correspondant dans l'en-tête http, puis le serveur déterminera si l'utilisateur est connecté en fonction de l'ID de session dans le cookie, puis affichera les données utilisateur. . Si le projet adopte l'idée de séparation front-end et back-end et que le serveur ne fournit que des interfaces et n'effectue pas de rendu serveur, alors cette méthode ne fonctionnera pas.

2. $route.query

Nous pouvons apporter les paramètres de la demande de connexion lorsque l'itinéraire saute :

router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
 url: 'xxx',
 method: 'post',
 data: {
  username: this.$route.query.username,
  password: this.$route.query.password
 }
})

De cette façon, les paramètres de connexion seront enregistrés dans l'URL, comme ceci : "http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx", puis l'interface de connexion est appelée dans le fichier créé hook pour renvoyer les données.

Même si le mot de passe est crypté md5, il est définitivement déraisonnable de mettre des informations sensibles telles que le nom d'utilisateur et le mot de passe dans l'URL.

3. Cookie

Une autre façon consiste à stocker les paramètres de connexion dans le cookie, puis à obtenir les informations stockées dans le cookie dans le hook créé. Ensuite, appelez l'interface de connexion. Il est également déraisonnable de stocker le nom d'utilisateur et le mot de passe dans un cookie. La version améliorée est que le serveur renvoie un jeton après une connexion réussie et que les données utilisateur sont obtenues via le jeton pendant la période de validité.

L'accès aux données par les cookies est plus difficile, car la paire clé-valeur dans le cookie est une

chaîne et liée par "=", ce qui nécessite des méthodes supplémentaires pour faire fonctionner le cookie.

<script>
 function setCookie (name, value, exdays) {
  let date = new Date()
  date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
  let expires = "expires=" + date.toGMTString()
  document.cookie = name + "=" + value + "; " + expires
 }
 function getCookie (name) {
  name = name + "="
  let cookieArr = document.cookie.split(&#39;;&#39;)
  for (let i = 0; i < cookieArr.length; i++) {
   let cookie = cookieArr[i].trim()
   if (cookie.indexOf(name) === 0) {
    return cookie.slice(name.length)
   }
  }
  return ""
 }

4. Stockage Web HTML5

En ce qui concerne le stockage Web, je dois inconsciemment penser que de nombreux navigateurs ne le prennent pas en charge. . En fait, IE8 et tous les éléments ci-dessus prennent en charge localStorage et sessionStorage. Le projet Vue prend en charge au moins IE9, vous pouvez donc utiliser le stockage Web en toute confiance.

LocalStorage n'a pas de limite de temps pour stocker les données, et elles ne deviendront pas invalides à moins qu'elles ne soient activement supprimées. SessionStorage deviendra invalide à la fermeture de la page ou du navigateur, ce qui convient à ce scénario.

Nous pouvons stocker les informations du jeton dans sessionStorage, puis demander des données via le jeton à chaque fois que la page est actualisée, mais puisque le jeton peut être stocké localement, pourquoi ne pas simplement enregistrer les données couramment utilisées directement dans le local ? L'utilisation de données locales peut réduire les demandes du réseau des clients et réduire la charge du serveur.

Étant donné que localStorage et sessionStorage sont en lecture seule, ils ne peuvent pas pointer directement vers un objet. Vous ne pouvez pas utiliser Object.assign() pour copier l'objet, car la valeur deviendra la chaîne "[object Object]", vous ne pourrez donc ajouter des attributs à sessionStorage que via une boucle.

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

Voici les problèmes que j'ai rencontrés dans mon travail récent. La solution finale était d'utiliser sessionStorage pour stocker des données.

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!