Vue項目登陸時保存用戶名密碼

記錄項目開發時保存用戶名密碼的方法

實現功能：

1. 勾選記住密碼，點擊登陸時，將帳號和密碼保存到cookies，記住密碼的狀態保存到localStorage裏。
2. 不勾選，清空將localStorage裏的狀態清空，登陸時會將cookies裏的帳號密碼清空。

準備

須要引入vue-cookies 和 crypto-js

npm i crypto-js
npm i vue-cookies
複製代碼

在main.js中配置

import Vue from 'vue';
import VueCookies from 'vue-cookies'; // 引入cookies 插件
Vue.use(VueCookies);
import CryptoJS from 'crypto-js';
Vue.prototype.CryptoJS = CryptoJS;
複製代碼

HTML

<Form class="login-form" ref="loginForm" :model="loginForm" :rules="ruleInline">
                <div class="avatar-container">
                    <img src="../assets/login/icon_head.png" alt="" width="80" height="80">
                </div>
                <FormItem prop="user">
                    <Input size="large" type="text" prefix="ios-person-outline" v-model="loginForm.user" placeholder="用戶名">
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input size="large" prefix="ios-lock-outline" :type="pwdType" v-model="loginForm.password" placeholder="密碼">
                        <Icon :type="eyesType" style="cursor: pointer" slot="suffix" @click="changeEyeType" />
                    </Input>
                </FormItem>
                <FormItem class="remember-pwd">
                    <Checkbox v-model="isRemember">記住密碼</Checkbox>
                </FormItem>
                <FormItem class="btn-container">
                    <Button size="large" type="primary" @click="handleLogin('loginForm')">登 錄</Button>
                </FormItem>
            </Form>
複製代碼

data

data() {
    return {
      loginForm: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: '請輸入用戶名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '請輸入密碼',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: '密碼不能小於6位',
            trigger: 'blur'
          }
        ]
      },
      pwdSee: false,
      pwdType: 'password',
      titleShow: false,
      isRemember: false
    };
  }
複製代碼

JS

/** * @author: WangXinYu * @describe: 保存Cookies帳號密碼 * @create: 2018/12/4 13:45 **/
    setCookies(username, password, exDays = 60) {
      // Encrypt，加密帳號密碼
      var cipherUsername = this.CryptoJS.AES.encrypt(
        username + '',
        'secretKey'
      ).toString();
      var cipherPsw = this.CryptoJS.AES.encrypt(
        password + '',
        'secretKey'
      ).toString();
      let exDate = new Date(); // 獲取時間
      exDate.setTime(exDate.getTime() + 24 * 60 * 60 * 1000 * exDays); // 保存的天數
      //字符串拼接cookie，爲何這裏用了==，由於加密後的字符串也有個=號，
      // 影響下面getcookie的字符串切割，你也能夠使用更炫酷的符號。
      window.document.cookie = `currentUsername =${cipherUsername};path=/;expires = ${exDate.toUTCString()}`;
      window.document.cookie = `password =${cipherPsw};path=/;expires = ${exDate.toUTCString()}`;
       //或者你能夠這樣寫
       //this.$cookies.set('currentUsername',cipherUsername,exDate.toUTCString());
       //this.$cookies.set('password',cipherPsw,exDate.toUTCString());
    },
    /** * @author: WangXinYu * @describe: 讀取cookies裏面的帳號密碼 * @create: 2018/12/4 14:09 **/
    getCookies() {
      let cipherUsername = this.$cookies.get(`currentUsername`);
      let cipherPsw = this.$cookies.get(`password`);
      // 將用戶名解碼
      let decryptUsername = this.CryptoJS.AES.decrypt(
        cipherUsername,
        `secretKey`
      ).toString(this.CryptoJS.enc.Utf8);
      // 將密碼解碼
      let decryptPwd = this.CryptoJS.AES.decrypt(
        cipherPsw,
        `secretKey`
      ).toString(this.CryptoJS.enc.Utf8);
      // 將帳號密碼付給form
      this.loginForm.user = decryptUsername;
      this.loginForm.password = decryptPwd;
    },
    /** * @author: WangXinYu * @describe: 清空cookies * @create: 2018/12/4 14:38 **/
    clearCookies() {
      this.$cookies.remove(`currentUsername`);
      this.$cookies.remove(`password`);
    }
複製代碼

登陸事件

/** * @author: WangXinYu * @describe: 點擊登陸事件 * @create: 2018/11/15 15:48 **/
    handleLogin(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
            // 在這兒寫登陸邏輯
          if (this.isRemember) {
            // 判斷 若是勾選記住密碼
            this.setCookies(this.loginForm.user, this.loginForm.password, 7);
          } else {
            // 不然 清空cookies
            this.clearCookies();
          }
          //這裏是由於要在created中判斷，因此使用了localstorage比較簡單，
          //固然你也能夠直接根據cookie的長度or其餘騷操做來判斷有沒有記住密碼。
          localStorage.setItem('isRemember', this.isRemember);
          this.$router.push({
            name: 'Home'
          });
        } else {
          this.$Message.error('Fail!');
        }
      });
    },
複製代碼

頁面進入時Created事件

created() {
  if (localStorage.getItem(`isRemember`) === 'true') {
    this.getCookies();
    this.isRemember = true;
  }
}
複製代碼