Vue.js écrit un exemple de page de connexion SPA

Pile technologique

• framework principal vue.js

• gestion de l'état vuex

• vue -gestion du routage du routeur

Processus général

Dans le processus général de connexion, une solution frontale est :

1. vérifier Statut : Vérifiez s'il y a un statut de connexion lors de l'entrée sur la page ou lorsque l'itinéraire change (la valeur enregistrée dans cookie ou 本地存储) ; les informations de connexion (uid, avatar, etc...) et enregistrez-les sinon, accédez à la page de connexion

2. Sur la page de connexion (ou la boîte de connexion), vérifiez si les informations saisies par l'utilisateur sont légales ;

3. Envoyer une demande de connexion une fois la vérification réussie ; si la vérification échoue, elle sera renvoyée à l'utilisateur

4. Si la connexion réussit, elle sera supprimée des données back-end

   Les informations enregistrent l'état de connexion (il faudra peut-être sauter si la connexion échoue, l'utilisateur le fera) ; être invité à échouer ;

5. sessionLe statut de connexion sera supprimé lorsque l'utilisateur effectuera une opération de déconnexion.

6. Ci-dessous, j'analyserai comment implémenter le code un par un selon les étapes répertoriées, le tout dans le code, avec des commentaires plus détaillés pour aider à comprendre le code.

Avant cela, on suppose que l'itinéraire de la page de connexion est

et l'itinéraire après la connexion est

. De cette façon, il vous suffit de placer

dans

pour stocker et restituer ces deux itinéraires. /login/user_infoApp.vueEt faites la router-view configuration :

// component/App.vue
<template><div class="container" id="app">  <transition name="fade"><keep-alive>      <router-view></router-view></keep-alive>  </transition></div></template>
...

Vérifiez l'état et sautezvue-router

Nous devons vérifier l'état à deux reprises :

// js/app.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Login from '../component/Login.vue'import UserInfo from '../component/UserInfo.vue'

Vue.use(VueRouter);const router = new VueRouter({  routes: [{path: '/login',component: Login
  }, {path: '/user_info',component: UserInfo
  }]
})
...

1 . Lorsque l'utilisateur ouvre la page ;

2. Lorsque le routage change

Tout d'abord, vous devez écrire une méthode pour vérifier l'état de connexion  :

Afin d'améliorer l'expérience utilisateur, lorsque l'utilisateur ouvre la page, le front-end doit vérifier s'il s'est connecté et ne demande pas à l'utilisateur de se reconnecter. Cette implémentation est très simple. Nous l'avons écrite dans le crochet checkLogin de

 :

// js/app.js
...
var app = new Vue({  data: {},  el: '#app',  render: h => h(App),
  router,
  store,  methods:{
    checkLogin(){      //检查是否存在session      //cookie操作方法在源码里有或者参考网上的即可      if(!this.getCookie('session')){//如果没有登录状态则跳转到登录页this.$router.push('/login');
      }else{//否则跳转到登录后的页面this.$router.push('/user_info');
      }
    }
  }
})

vue实例 De plus, nous devons également vérifier la connexion lorsque created change. changement de routage), si nous ne le faisons pas. Une erreur peut survenir lors de la vérification de l'état de connexion :

// js/app.js
...
var app = new Vue({
  ...
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})

路由L'utilisateur est connecté en entrant dans la page, mais la connexion a expiré lors de l'opération ;

• L'utilisateur a supprimé manuellement

  /
et a effectué l'opération

• cookie本地storageL'utilisateur a saisi manuellement (ou a saisi à partir des favoris ; ) un itinéraire qui nécessitait une connexion sans se connecter.

• L'utilisateur entre dans l'itinéraire de la page de connexion lorsqu'il est connecté

• Ce sont des raisons suffisantes pour nous pour surveiller l'itinéraire. Si elle est mise en œuvre, nous pouvons l'utiliser

  avec la fonction
 :

vueÀ ce stade, nous avons terminé la première étape de watch. Ensuite, mettez en œuvre comment obtenir les informations personnelles des utilisateurs.

// js/app.js
...
var app = new Vue({
  ...  //监听路由检查登录
  watch:{"$route" : 'checkLogin'
  },  //进入页面时
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})

Obtenir des informations utilisateur

一般过程Après une connexion réussie, nous devons généralement afficher certaines informations utilisateur depuis le backend, telles que le pseudo, l'avatar, le niveau, etc... L'obtenir est très simple, envoyez les requêtes http sont extraites du backend ; mais généralement, ces informations seront utilisées dans plusieurs routes (par exemple, l'uid doit généralement être transporté comme paramètre dans chaque interface backend), elles doivent donc être enregistrées dans l'état global (

) :

Bien sûr, nous devons le configurer avant, par exemple l'écrire dans vuex ou l'écrire séparément comme

et l'introduire dans

// component/App.vue
...
<script>export default {
  ...
  mounted(){//组件开始挂载时获取用户信息this.getUserInfo();
  },  methods: {//请求用户的一些信息
    getUserInfo(){      this.userInfo = {nick: &#39;Doterlin&#39;,ulevel: 20,uid: &#39;10000&#39;,portrait: &#39;images/profile.png&#39;
      }      //获取信息请求
      ts.$http.get(url, {//参数"params": this.userInfo
      }).then((response) => {//Successif(response.data.code == 0){          this.$store.commit(&#39;updateUserInfo&#39;, this.userInfo); 
        }
      }, (response) => {//Error
      });

    }
  }
}
</script>
...

(recommandé) :

app.jsstore.js saisie Vérifier et envoyer les demandes de connexion app.js

Afin d'éviter que certains caractères inattendus et demandes trop fréquentes soient transmises en arrière-plan, le front-end doit vérifier la saisie de l'utilisateur et éviter les demandes répétées . Bien entendu, les caractères légaux des différents sites Web sont différents. Ici, nous vérifions uniquement les caractères illégaux lorsque

// js/app.js// Vuex配置
...
const store = new Vuex.Store({  state: {domain:'http://test.example.com', //保存后台请求的地址，修改时方便（比方说从测试服改成正式服域名）
    userInfo: { //保存用户信息
      nick: null,      ulevel: null,      uid: null,      portrait: null
    }
  },  mutations: {//更新用户信息
    updateUserInfo(state, newUserInfo) {
      state.userInfo = newUserInfo;
    }
  }
})
...

est utilisé :

Le 为空 voici la méthode de demande de connexion, et le mot de passe est. envoyé au backend dans

Il n'est pas envoyé directement. Il est généralement crypté selon les règles définies par le backend avant l'envoi, comme

//component/Login.vue
<template><div class="login" id="login">
   ...<div class="log-email"><input type="text" placeholder="Email" :class="&#39;log-input&#39; + (account==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)" v-model="account"><input type="password" placeholder="Password" :class="&#39;log-input&#39; + (password==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)"  v-model="password"><a href="javascript:;" class="log-btn" @click="login">Login</a></div>
    ...</div></template><script>import Loading from &#39;./Loading.vue&#39;export default {  name: &#39;Login&#39;,
  data(){      return {          isLoging: false,          account: &#39;&#39;,          password: &#39;&#39;
      }
  },  components:{
    Loading
  },  methods:{      //登录逻辑
      login(){          if(this.account!=&#39;&#39; && this.password!=&#39;&#39;){              this.toLogin();
          }
      }

}</script>
...

L'exemple utilise un cryptage à double hachage et des guillemets

. est la suivante : this.toLoginpost哈希算法Cela termine les étapes 3, 4 et 5. La dernière étape consiste à vous déconnecter. js/sha1.min.js

Déconnexion

...      //登录请求
      toLogin(){          //一般要跟后端了解密码的加密规则          //这里例子用的哈希算法来自./js/sha1.min.js          let password_sha = hex_sha1(hex_sha1( this.password ));          //需要想后端发送的登录参数          let loginParam = {              account: this.account,
              password_sha
          }          //设置在登录状态          this.isLoging = true;          //请求后端          this.$http.post( 'example.com/login.php', {          param: loginParam).then((response) => {if(response.data.code == 1){              //如果登录成功则保存登录状态并设置有效期              let expireDays = 1000 * 60 * 60 * 24 * 15;              this.setCookie('session', response.data.session, expireDays);              //跳转              this.$router.push('/user_info'); 
            }
          }, (response) => {//Error
          });

...

Lors de la déconnexion, certains doivent demander le backend et d'autres non. L'essentiel est de supprimer le statut de connexion enregistré :

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!