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;
  }
}
复制代码

转载于:https://juejin.im/post/5c073d6fe51d451dc1626d74