技術(shù)棧
一般過程
在一般的登錄過程中，一種前端方案是：
下面我根據(jù)列出的步驟一一分析如何做代碼實(shí)現(xiàn)，所有在代碼在https://github.com/doterlin/vue-example-login中，并帶有較詳細(xì)注釋幫助理解代碼。
在此之前假設(shè)登錄頁面路由為/login，登錄后的路由為/user_info。這樣只需要在App.vue放好router-view用于存放和渲染這兩個(gè)路由。
// component/App.vue<template><div class="container" id="app"> <transition name="fade"> <keep-alive> <router-view></router-view> </keep-alive> </transition></div></template>...
并做好vue-router配置:
// 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 }]})...檢查狀態(tài)與跳轉(zhuǎn)
在兩個(gè)時(shí)候我們需要檢查狀態(tài)：1.用戶打開頁面時(shí)； 2.路由發(fā)生變化時(shí)；
首先需要寫好一個(gè)檢查登錄態(tài)的方法checkLogin：
// js/app.js...var app = new Vue({ data: {}, el: '#app', render: h => h(App), router, store, methods:{ checkLogin(){ //檢查是否存在session //cookie操作方法在源碼里有或者參考網(wǎng)上的即可 if(!this.getCookie('session')){ //如果沒有登錄狀態(tài)則跳轉(zhuǎn)到登錄頁 this.$router.push('/login'); }else{ //否則跳轉(zhuǎn)到登錄后的頁面 this.$router.push('/user_info'); } } }})為了提升用戶體驗(yàn)，當(dāng)用戶打開頁面時(shí)前端需要檢查他是否已經(jīng)登錄，不需要用戶再次登錄。這個(gè)實(shí)現(xiàn)很簡單,我們在vue實(shí)例的created鉤子里寫好：
// js/app.js...var app = new Vue({ ... created() { this.checkLogin(); }, methods:{ checkLogin(){ ... } }})另外，路由發(fā)生變化時(shí)也需要檢查登錄，以下情景(路由變化)如果我們不檢查登錄態(tài)可能會發(fā)生錯(cuò)誤：
這些足夠成為我們監(jiān)聽路由的理由，實(shí)現(xiàn)的話可以利用vue的watch功能：
// js/app.js...var app = new Vue({ ... //監(jiān)聽路由檢查登錄 watch:{ "$route" : 'checkLogin' }, //進(jìn)入頁面時(shí) created() { this.checkLogin(); }, methods:{ checkLogin(){ ... } }})至此，我們就完成了一般過程中的第1步。接下來實(shí)現(xiàn)如何獲取用戶個(gè)人信息。
獲取用戶信息
在成功登錄后，我們一般需要從后端顯示用戶的一些信息，比如昵稱，頭像，等級等等...獲取的話很簡單，發(fā)一個(gè)http請求從后端拉取；但是一般這些信息會在多的路由用到（比如uid一般都需要在各個(gè)后端接口中作為參數(shù)帶上），所以需要保存到全局狀態(tài)中(vuex)：
// component/App.vue...<script>export default { ... mounted(){ //組件開始掛載時(shí)獲取用戶信息 this.getUserInfo(); }, methods: { //請求用戶的一些信息 getUserInfo(){ this.userInfo = { nick: 'Doterlin', ulevel: 20, uid: '10000', portrait: 'images/profile.png' } //獲取信息請求 ts.$http.get(url, { //參數(shù) "params": this.userInfo }).then((response) => { //Success if(response.data.code == 0){ this.$store.commit('updateUserInfo', this.userInfo); } }, (response) => { //Error }); } }}</script>...當(dāng)然我們需要在之前配置好，比如在寫在app.js或者單獨(dú)寫成store.js并在app.js引入（推薦）：
// js/app.js// Vuex配置...const store = new Vuex.Store({ state: { domain:'http://test.example.com', //保存后臺請求的地址，修改時(shí)方便（比方說從測試服改成正式服域名） userInfo: { //保存用戶信息 nick: null, ulevel: null, uid: null, portrait: null } }, mutations: { //更新用戶信息 updateUserInfo(state, newUserInfo) { state.userInfo = newUserInfo; } }})...輸入校驗(yàn)和發(fā)送登錄請求
為了防止一些不符合預(yù)期的字符和過于頻繁的請求傳到后臺，前端要對用戶的輸入進(jìn)行校驗(yàn)和防止重復(fù)請求。當(dāng)然不同網(wǎng)站的合法字符不一樣，這里只做為空時(shí)不合法的校驗(yàn)：
//component/Login.vue<template><div class="login" id="login"> ... <div class="log-email"> <input type="text" placeholder="Email" :class="'log-input' + (account==''?' log-input-empty':'')" v-model="account"><input type="password" placeholder="Password" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password"> <a href="javascript:;" rel="external nofollow" class="log-btn" @click="login">Login</a> </div> ...</div></template><script>import Loading from './Loading.vue'export default { name: 'Login', data(){ return { isLoging: false, account: '', password: '' } }, components:{ Loading }, methods:{ //登錄邏輯 login(){ if(this.account!='' && this.password!=''){ this.toLogin(); } }}</script>...這里的this.toLogin就是登錄請求的方法，在post密碼到后端時(shí)不是直接發(fā)送，一般會按照后端定的規(guī)則加密后在發(fā)送，比如哈希算法，例子進(jìn)行了的雙重哈希加密，引用了js/sha1.min.js，大致實(shí)現(xiàn)如下：
... //登錄請求 toLogin(){ //一般要跟后端了解密碼的加密規(guī)則 //這里例子用的哈希算法來自./js/sha1.min.js let password_sha = hex_sha1(hex_sha1( this.password )); //需要想后端發(fā)送的登錄參數(shù) let loginParam = { account: this.account, password_sha } //設(shè)置在登錄狀態(tài) this.isLoging = true; //請求后端 this.$http.post( 'example.com/login.php', { param: loginParam).then((response) => { if(response.data.code == 1){ //如果登錄成功則保存登錄狀態(tài)并設(shè)置有效期 let expireDays = 1000 * 60 * 60 * 24 * 15; this.setCookie('session', response.data.session, expireDays); //跳轉(zhuǎn) this.$router.push('/user_info'); } }, (response) => { //Error });...這樣就完成了第3,4,5個(gè)步驟了。最后一步就是注銷。
注銷
注銷時(shí)有的需要請求后端有的不需要，關(guān)鍵的事要刪除保存的登錄狀態(tài)：
// component/UserInfo.vue... logout(){ //刪除cookie并跳到登錄頁 this.isLogouting = true; //請求后端，比如logout.php // this.$http.post('eaxmple.com/logout.php')... //成功后刪除cookie this.delCookie('session'); //重置loding狀態(tài) this.isLogouting = false; //跳轉(zhuǎn)到登錄頁 this.$router.push('/login/'); }...以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持武林網(wǎng)!
新聞熱點(diǎn)
疑難解答
