Comment enregistrer une session dans vue

Utiliser le stockage de session dans Vue.js pour stocker et récupérer des données est relativement simple. Le stockage de session est une zone de stockage dans le navigateur associée à la session en cours, qui peut stocker des données constituées de paires clé-valeur (les données stockées dans le stockage de session seront effacées à la fin de la session). Dans Vue.js, nous pouvons utiliser l'objet sessionStorage pour lire et écrire des paires clé-valeur.

Ce qui suit est un exemple d'utilisation de Session Storage pour stocker les informations de connexion de l'utilisateur :

1. Créez un composant Login.vue

<template>
  <div>
    <h2>用户登录</h2>
    <form>
      <div>
        <label for="username">用户名</label>
        <input type="text" name="username" v-model="username"/>
      </div>
      <div>
        <label for="password">密码</label>
        <input type="password" name="password" v-model="password"/>
      </div>
      <button @click.prevent="login()">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      sessionStorage.setItem('username', this.username)
      sessionStorage.setItem('password', this.password)
      alert('登录成功')
    }
  }
}
</script>

Dans ce composant, nous utilisons la méthode sessionStorage.setItem() pour stocker le nom d'utilisateur de l'utilisateur et mot de passe. Ceci est effectué lorsque vous cliquez sur le bouton de connexion, stockant les données saisies dans le sessionStorage du navigateur. Si la connexion réussit, cette méthode fera apparaître une boîte de dialogue pour afficher le message de réussite.

2. Créer un composant Dashboard.vue

<template>
  <div>
    <h2>用户主面板</h2>
    <p>欢迎 {{ username }}</p>
    <button @click.prevent="logout()">退出登录</button>
  </div>
</template>

<script>
export default {
  computed: {
    username () {
      return sessionStorage.getItem('username')
    },
  },
  methods: {
    logout () {
      sessionStorage.clear()
      alert('退出成功')
    }
  }
}
</script>

Dans ce composant, nous utilisons la méthode sessionStorage.getItem() pour lire le nom d'utilisateur précédemment stocké. En mode calculé, nous définissons une propriété calculée nom d'utilisateur qui récupère le nom d'utilisateur dans sessionStorage. Nous utilisons la méthode sessionStorage.clear() pour effacer toutes les données sessionStorage stockées afin de quitter le système, et une boîte de dialogue apparaîtra pour afficher un message de réussite.

Voici comment utiliser le stockage de session dans Vue.js pour stocker et récupérer des données. Le stockage de session est idéal pour stocker des données temporaires telles que la configuration utilisateur et l'état de l'application, mais veuillez ne pas y stocker de données sensibles telles que des mots de passe. Chaque fois que vous stockez des données sensibles, utilisez des technologies plus sécurisées telles que le cryptage ou les protocoles Flat Text Storage (PTP) pour garantir la confidentialité et la sécurité.

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!