前端vue登录记住账号密码并反显

1.页面所需属性(只展示所需按钮)

<template>
<Checkbox v-model="single" size="large" @on-change="singleChange">记住账号密码</Checkbox>
<Button @click="passWordlogOn()">登 录</Button>
</template>

 2.方法以及属性定义（）

账号密码进行了加密解密操作 具体看文章http://t.csdn.cn/LvCBG

<script>
import { encryptionCode, decryptCode } from '@/utils/common';
 data() {
    return {
      queryFormPassword: {
        account: '',
        pabcd: ''
      },
      single: false,
    };
  },
  created() {
    // 首先查看是否记住密码，有则直接渲染到页面中
    if (this.getCookie('phone') && this.getCookie('pabcd')) {
      //对账号密码进行解密
      let phone = decryptCode(this.getCookie('phone'), '01234567789abcdefg');
      let pabcd = decryptCode(this.getCookie('pabcd'), '01234567789abcdefg');
      this.queryFormPassword.account = phone;
      this.queryFormPassword.pabcd = pabcd;
      this.single = true;
    } else {
      this.queryFormPassword.account = '';
      this.queryFormPassword.pabcd = '';
      this.single = false;
    }
  },
  methods: {

    //记住密码
    singleChange(val) {
      this.single = val;
    },

    //密码登录
    passWordlogOn() {
         //组件表单验证
      this.$refs.queryFormPassword.validate((valid) => {
        if (valid) {
          getKey({ phone: this.queryFormPassword.account }).then((res) => {
            if (res.code == 200) {
              const params = {
                phone: this.queryFormPassword.account,
                // pabcd: encrypt(this.queryFormPassword.pabcd, res.data)
                pabcd: this.queryFormPassword.pabcd
              };
              this.$store.dispatch('user/login', params);
              //延时一秒通过token判断是否登录成功
              setTimeout(() => {
                const token = this.$store.getters.token;
                if (token) {
                  if (this.single) {
                    //对账号密码进行加密
                    let phone =                                             
                    encryptionCode(this.queryFormPassword.account,'01234567789abcdefg');          
                    let pabcd = 
                    encryptionCode(this.queryFormPassword.pabcd, '01234567789abcdefg');
                    // 记住密码
                    this.setCookie('phone', phone, 7); //保存帐号到cookie，有效期7天
                    this.setCookie('pabcd', pabcd, 7); //保存密码到cookie，有效期7天
                  } else {
                    // 清除已记住的密码
                    this.delCookie('phone');
                    this.delCookie('pabcd');
                  }
                }
              }, 1000);
            } else {
            }
          });

        }
      });
    },

    //存放cookie
    setCookie(name, value, day) {
      let date = new Date();
      // setDate：用于设置一个月的某一天
      // getDate：通过时间戳返回月份的某一天
      // expires: cookie存放到指定日期
      date.setDate(date.getDate() + day);
      document.cookie = name + '=' + value + ';expires=' + date;
    },

    // 获取cookie
    getCookie(name) {
      //规定要匹配的格式
      let reg = RegExp(name + '=([^;]+)');
      // 通过格式用match(指定的值或一个以及多个正则表达式)函数 查找
      let arr = document.cookie.match(reg);
      //通过判断返回指定值
      if (arr) {
        return arr[1];
      } else {
        return '';
      }
    },

    //删除cookie
    delCookie(name) {
      this.setCookie(name, null, -1);
    }
  }
</script>