Que dois-je faire si les paramètres de routage de vue-router sont actualisés et disparaissent ?

Scénario : application d'une seule page implémentée par vue-router. Une fois que la page de connexion a appelé l'interface de connexion, le serveur renvoie les informations utilisateur puis les transmet au composant de page d'accueil via router.push({name : 'index', params: res.data}) et affichez les données sur la page d'accueil. Mais après avoir actualisé la page, les données ont disparu.

Solution :

1. Rendu de session et du 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 un utilisateur. informations correspondant à la session, puis restituez les données de la page d'accueil, transmettez l'identifiant de session au navigateur via l'en-tête de réponse et générez 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 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
  }
})

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 appelez 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 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 des cookies est plus difficile, car les paires clé-valeur dans les cookies sont des chaînes et liées par "=", et des méthodes supplémentaires pour faire fonctionner les cookies doivent être écrites.

<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(';')
    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 supérieur 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 en 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 ~

.

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!