之前在做的項目做了記住密碼的這麼一個小功能,這裏記錄下思路?????
思路:
1.第一次點擊記住密碼時,需要將記住密碼的狀態記住,將用戶的信息保存在本地(這裏的信息中的密碼時加密之後的)
2.當用戶第二次進入時,要回顯出來基本信息
3.當除第一次進入的其他 情況時登錄,用戶可以修改這種狀態是記住還是不記住,如果選擇不記住的話,將保存在本地的信息移除
如果這時沒有改變狀態,還是記住狀態,這時需要注意,這裏的密碼時加密過的密碼,所以給後端傳參的時候不在需要加密
<template>
<div class="remember">
<span>記住密碼?</span>
<van-switch
v-model="checked"
active-color="#07c160"
inactive-color="#ccc"
size="16px"
@change="changeStatus"
/>
</div></template>
<script>
created(){
this.remember = JSON.parse(getStore('remember'))
if (this.remember && this.platformName == 'inst') {
this.checked = true;
this.phone = this.remember.phone;
this.password = this.remember.password;
this.role = this.remember.role;
this.bankName = this.remember.bankName;
this.bankId = this.remember.bankId;
this.userType = this.remember.userType;
} else {
this.phone = "";
this.password = "";
}
}
// 1.點擊開關狀態切換是否記住密碼
changeStatus(checked) {
let that = this;
//2. 如果密碼爲空的時候,返回提示密碼不能爲空
if (!that.password) {
Toast('密碼不能爲空');
that.checked = false
return false;
}
that.checked = checked;
// 3.記住選擇狀態,當選擇是不記住密碼時,這裏需要下清空手機號和密碼
if (!that.checked) {
that.phone = "";
that.password = "";
}
}
// 點擊登錄時
login() {
let that = this
// 1.密碼加密處理
if (that.password) {
that.md5Password = $.md5(that.password);
}
if (that.loginType == 1) {
if (!checkPhone(that.phone)) return
}
if (that.loginType == 2) {
if(that.rememberPass==true){
// 思路,用戶如果點擊密碼後,1. 判斷一下是否是第一次記住密碼,如果不是第一次的話,上一次點擊的時候將信息已經保存在了本地,所以這時候登錄的時候已經是返顯了加密過的密碼,所以不需再一次加密
if(that.remember&&that.phone==that.remember.phone&&that.password==that.remember.password){
that.md5Password=that.remember.password;
}else {
// 這裏表示第一次點擊記住密碼按鈕,需要將用戶填的信息,保存到本地,以便下次用戶進入回顯
let remember={
phone: that.phone,
password: that.md5Password,
userType: that.userType, // 用戶身份
bankId: that.bankId, // 各個銀行id
typetxt: that.typetxt, // 銀行
bankName: that.bankName,
type: that.type
}
// 這裏說明也說明是第一次記住密碼,所以需要將相關信息保存到本地,方便下次進入登錄時回顯
setStore('remember',remember);
}
}else {
// 之後沒次登錄的時候不記住的話,就移除保存的信息,因爲下次已經不需要回顯了
removeStore('remember');
}
}
if (this.phone && !/^1[3|4|5|7|8][0-9]{9}$/.test(this.phone)) {
this.message('請正確填寫手機號')
}
let getlogin = that.ajaxRequest({
type: 'post',
url: '/user/userLogin',
param: {
phone: that.phone || null,
username: that.username || null,
type: that.type || null,
userType: that.userType || null, // 身份
bankType: that.bankType || null, // 銀行
position: that.position || null,
bankId: that.bankId || null, // 各個銀行id
password: that.md5Password || null,
smsCode: that.smsCode || null,
loginType: that.loginType || null,
},
dataType: 'json',
successfn: function (res) {
console.log('登錄', res.data)
if (res.data) {
let userInfo = res.data
setStore('userInfo', userInfo);
if (that.loginType == 1) {
that.pageJump('/index');
} else if (that.loginType == 2) {
that.pageJump('/xxxxIndex');
} else if (that.loginType == 3) {
that.pageJump('/xxxIndex');
} else if (that.loginType == 4) {
that.pageJump('/index');
}
}
},
errorfn: function (e) {
console.log(e)
that.message(e.msg)
}
})
},
</script>