記住密碼篇

之前在做的項目做了記住密碼的這麼一個小功能,這裏記錄下思路?????
思路:
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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章