Vue.js schreibt ein Beispiel einer SPA-Anmeldeseite

Technologie-Stack

• vue.js Hauptframework

• Vuex State Management

• vue -Router-Routing-Verwaltung

Allgemeiner Prozess

Im allgemeinen Anmeldeprozess ist eine Front-End-Lösung:

1. prüfen Status: Überprüfen Sie, ob beim Betreten der Seite oder bei Änderung der Route ein Anmeldestatus vorliegt (der in cookie oder 本地存储 gespeicherte Wert). Wenn ein Anmeldestatus vorhanden ist, fragen Sie ab die Anmeldeinformationen (UID, Avatar usw.) und speichern Sie sie. Wenn nicht, springen Sie zur Anmeldeseite (oder im Anmeldefeld). die vom Benutzer eingegebenen Informationen sind legal;

2. Senden Sie eine Anmeldeanfrage, nachdem die Überprüfung fehlgeschlagen ist, wird sie an den Benutzer zurückgesendet; 🎜>

Wenn die Anmeldung erfolgreich ist, werden sie aus den Backend-Daten entfernt
3. Die Informationen speichern den Anmeldestatus (möglicherweise muss der Benutzer springen); wenn die Anmeldung nicht erfolgreich ist, wird der Benutzer dies tun

4. Der Anmeldestatus wird gelöscht, wenn der Benutzer einen Abmeldevorgang durchführt.

5. Im Folgenden werde ich analysieren, wie der Code einzeln gemäß den aufgeführten Schritten implementiert wird, alle im Code, mit detaillierteren Kommentaren, um das Verständnis des Codes zu erleichtern.

   session Zuvor wird davon ausgegangen, dass die Route der Anmeldeseite

   und die Route nach der Anmeldung
ist. Auf diese Weise müssen Sie zum Speichern und Rendern dieser beiden Routen nur
6. in

   platzieren.

Und führen Sie die

-Konfiguration durch:

/loginÜberprüfen Sie den Status und springen Sie/user_infoApp.vueWir müssen den Status zweimal überprüfen: router-view 1. Wenn der Benutzer die Seite öffnet; >

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

Um das Benutzererlebnis zu verbessern, muss das Frontend beim Öffnen der Seite durch den Benutzer prüfen, ob er angemeldet ist, und erfordert nicht, dass sich der Benutzer erneut anmeldet. Diese Implementierung ist sehr einfach. Wir haben es im

-Hook von vue-router geschrieben:

// 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
  }]
})
...

Darüber hinaus müssen wir im folgenden Szenario auch die Anmeldung überprüfen ( Routing-Änderung), wenn wir dies nicht tun. Bei der Überprüfung des Anmeldestatus kann ein Fehler auftreten:

Der Benutzer ist beim Betreten der Seite angemeldet, aber die Anmeldung ist beim Ausführen des Vorgangs abgelaufen ;

Der Benutzer hat den Vorgang manuell gelöscht checkLogin

// 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');
      }
    }
  }
})

Der Benutzer hat ihn manuell eingegeben (oder aus den Favoriten eingegeben). ) eine Route, die eine Anmeldung ohne Anmeldung erforderte. vue实例created

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

Der Benutzer betritt die Route der Anmeldeseite, wenn er angemeldet ist

路由

Das sind genug Gründe für uns Um die Route zu überwachen, können wir die
• -Funktion verwenden:

An diesem Punkt haben wir den ersten Schritt in
• abgeschlossen. Implementieren Sie als Nächstes, wie Sie persönliche Benutzerinformationen erhalten.

  cookieBenutzerinformationen abrufen本地storage

  Nach erfolgreicher Anmeldung müssen wir im Allgemeinen einige Benutzerinformationen aus dem Backend anzeigen, z. B. Spitzname, Avatar, Level usw. Das Abrufen ist sehr einfach. Senden Sie es a http-Anfragen werden vom Backend abgerufen; im Allgemeinen werden diese Informationen jedoch in mehreren Routen verwendet (z. B. muss die UID im Allgemeinen als Parameter in jeder Backend-Schnittstelle übertragen werden), sodass sie im globalen Status gespeichert werden müssen (
):

• Natürlich müssen wir es vorher konfigurieren, z. B. indem wir es in
schreiben oder es separat als
• schreiben und in

  einführen (empfohlen):

Eingabe Überprüfen und Anmeldeanfragen senden

vue Um zu verhindern, dass einige unerwartete Zeichen und zu häufige Anfragen in den Hintergrund übertragen werden, muss das Frontend die Eingaben des Benutzers überprüfen und wiederholte Anfragen verhindern . Natürlich sind die zulässigen Zeichen verschiedener Websites unterschiedlich. Hier überprüfen wir nur die illegalen Zeichen, wenn watch verwendet wird:

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

Das 一般过程 ist hier die Anmeldeanforderungsmethode und das Passwort an das Backend gesendet

Es wird normalerweise gemäß den vom Backend festgelegten Regeln verschlüsselt, z. B.

Das Beispiel verwendet eine doppelte Hash-Verschlüsselung und Anführungszeichen

lautet wie folgt:

vuex

Damit sind die Schritte 3, 4 und 5 abgeschlossen. Der letzte Schritt ist das Abmelden.

// 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>
...

Abmeldenapp.jsstore.jsBeim Abmelden müssen einige das Backend anfordern, andere nicht. Das Wichtigste ist, den gespeicherten Anmeldestatus zu löschen: app.js

// 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;
    }
  }
})
...

Das obige ist der detaillierte Inhalt vonVue.js schreibt ein Beispiel einer SPA-Anmeldeseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!