1.獲取登錄所需要的用戶名和密碼信息
所以采用v-model對用戶名和密碼進(jìn)行雙向綁定蒸辆。即可獲取用戶輸入的內(nèi)容,保存在loginData中闲坎，再進(jìn)行驗(yàn)證時和自定義的userMsg驗(yàn)證即可遂庄。
為了簡便操作都哭，這里的用戶信息沒有通過后臺獲取详民，只是在這里簡單的自定義了一個用戶對象田弥。即使在與后臺交互時涛酗，也是相差無幾的。
<Input type="text" v-model="loginData.user" placeholder="用戶名">
<Input type="password" v-model="loginData.password" placeholder="密碼">
//密碼信息
return {
loginData: {
user: '',
password: '',
switch: false
},
//默認(rèn)用戶密碼
userMsg: {
user: 'admin',
password: '123456'
}
}
}
2. 登錄操作
實(shí)現(xiàn)登錄便是點(diǎn)擊登錄按鈕,@click="handleSubmit(loginData)用v-on綁定了handleSubmit事件,執(zhí)行登錄驗(yàn)證以及頁面跳轉(zhuǎn)操作偷厦。
<Button type="primary" long size="large" @click="handleSubmit(loginData)">
登錄
</Button>`
handleSubmit(data) {
/******登錄驗(yàn)證等省略******/
this.$router.push({path: '/main'}); //路由跳轉(zhuǎn)
}
//實(shí)現(xiàn)路由的跳轉(zhuǎn)還需要在我們的router文件中商叹，配置路由的路徑和相應(yīng)的組件名：
routes: [
{
path: '/',
name: 'login',
component: login
},
{
path:'/main',
name:'main',
component:main
}
]
- 結(jié)合localStorage的記住密碼
localStorage的簡單使用方法:https://blog.csdn.net/mjzhang1993/article/details/70820868
<span slot="label" v-bind:class="{remember:loginData.switch}">記住密碼?</span>
<i-switch v-model="loginData.switch">
<span slot="open">On</span>
<span slot="close">Off</span>
</i-switch>
handleSubmit(data) {
//判斷用戶名密碼是否正確
if (this.loginData.user == this.userMsg.user && this.loginData.password == this.userMsg.password) {
if (this.loginData.switch == true) { //記住密碼
localStorage.setItem('user', JSON.stringify(this.loginData));
}
else{
localStorage.removeItem('user');
}
console.log(this.loginData);
this.$store.commit('changeLoginStatus', this.loginData.user);
this.$router.push({path: '/main'});
}
else {
this.$Message.error('賬號或密碼輸入錯誤！');
}
}
這里的原理其實(shí)也非常容易理解只泼。對于這個switch的的按鈕剖笙，只負(fù)責(zé)數(shù)據(jù)的綁定。主要還是在于點(diǎn)擊登錄按鈕時所執(zhí)行的操作请唱。通過switch的狀態(tài)弥咪，根據(jù)不同情況處理數(shù)據(jù)。
- 當(dāng)我們選擇記住密碼后十绑，如果密碼輸入正確聚至，我們向localstorage傳遞我們的用戶信息這個對象，保存當(dāng)前用戶的賬號和密碼本橙，以及密碼保存的狀態(tài)扳躬。
- 如果沒有選擇保存密碼，則從localstorage中移除當(dāng)前登錄信息
- 因?yàn)橄嚓P(guān)里的用戶信息直接與兩個輸入框雙向綁定甚亭，所以從localstorage中獲取的值直接給輸入框綁定的數(shù)據(jù)贷币，無需再重新賦值
4.登錄狀態(tài)管理
在代碼的處理中，子組件想要獲得父組件的數(shù)據(jù)亏狰，我們可以用到prop役纹，當(dāng)父組件想要獲得子組件的數(shù)據(jù)是，我們可以用到$emit那么兄弟組件之間骚揍、甚至是沒啥關(guān)系的組件想要獲得其他組件的信息時字管，應(yīng)當(dāng)怎么處理呢？
對于狀態(tài)管理的學(xué)習(xí)信不，我是把其當(dāng)做我們程序中的全局變量去理解嘲叔，他是我們所有組件都能共享的內(nèi)容。詳情用法可查看官網(wǎng)vuex
- 代碼的放置位置
我們可以放在main.js中(不建議這么做）抽活，為了方便代碼的管理硫戈，可以新建另外的文件夾以方vuex的代碼。但因?yàn)檫@次代碼量比較少下硕，我就偷懶放在了main.js中了
let store = new Vuex.Store({
state:{
loginStatus:'登錄'
},
mutations:{
changeLoginStatus(state,name){
state.loginStatus=name;
}
}
})
store中的數(shù)據(jù)的是不能直接在組件中修改的丁逝，必須得通過vuex中的mutation去執(zhí)行修改操作汁胆。
當(dāng)點(diǎn)擊登錄按鈕后，執(zhí)行下面行代碼霜幼，就會到我們的vuex中的代碼中去執(zhí)行嫩码。
this.$store.commit('changeLoginStatus', this.loginData.user);
