Solution au problème de l'actualisation et de la disparition des paramètres de routage du routeur vue

Cet article présente principalement le problème de la vue-routerles paramètres de routagedisparaissent après actualisation

Scénario : Application d'une seule page implémentée par vue-router, appel à la page de connexion Après vous être connecté à l'interface , le serveur renvoie les informations utilisateur, qui sont ensuite transmises au composant de page d'accueil via router.push({name : 'index', params : res.data}), et les données est affiché sur la page d'accueil. Mais après avoir actualisé la page, les données ont disparu.

Solution :

1 session& rendu du serveur

La solution traditionnelle est, La. 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 de l'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 cookie correspondant. fichier. 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 demande de connexion lors du routage :

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
 }
})

Connectez-vous comme ceci Les paramètres seront être enregistré dans l'URL, comme ceci : "http://xxx.xxx.xxx/index?username=xxx&password=xxxxxx", puis appeler l'interface de connexion dans le hook créé 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éé, puis à appeler le 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. ci-dessus prend 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. Si vous avez une meilleure solution, n'hésitez pas à m'éclairer

Ci-dessus, c'est tout le contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra Script Home.

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!