vue账号密码登录增加记住密码功能

实现思路：

刷新登录页面时查看cookie中是否存储用户名、密码、是否记住密码，如果有就将cookie中的用户名和密码回显到form表单中，如果没有则将用户输入的用户名和密码存入cookie

html代码：（只截取了部分账号密码功能部分代码，主要是记住密码功能）

<el-tab-pane label="账号登录" name="first">
          <el-form-item prop="username">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="账号"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="password">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleLogin"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
            </span>
          </el-form-item>
          <el-checkbox v-model="isRemember" style="margin-bottom:10px;">记住密码</el-checkbox>
          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
</el-tab-pane>

js代码：

export default {
  data() {
    return {
        loginForm: {
        username: '',
        password: ''
      },
      isRemember: false, // 默认不记住密码
        }
    },
    mounted() {
    this.getCookie()// 判断cookie中的值
    },
     methods: {
     getCookie() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split(';')
        for (var i = 0; i < arr.length; i++) {
          var userKey = arr[i].split('=')
          if (userKey[0].trim() === 'userName') {
            this.loginForm.username = userKey[1]
          } else if (userKey[0].trim() === 'userPws') {
            this.loginForm.password = userKey[1]
          } else if (userKey[0].trim() === 'isRemember') {
            this.isRemember = Boolean(userKey[1])
          }
        }
      }
    },
    // 存储
    setCookie(userName, userPws, days) {
      var curDate = new Date()
      curDate.setTime(curDate.getTime() + 24 * 60 * 60 * 1000 * days) // 设置cookie存储的有效时间
      window.document.cookie = 'userName' + '=' + userName + ';path=/;expires=' + curDate.toGMTString()
      window.document.cookie = 'userPws' + '=' + userPws + ';path=/;expires=' + curDate.toGMTString()
      window.document.cookie = 'isRemember' + '=' + this.isRemember + ';path=/;expires=' + curDate.toGMTString()
        },
        handleLogin() {
            this.loading = true
          // 登录时判断是否选择记住密码，如果是则设置cookie不是清除cookie，然后再调用登录函数进行登录
          if (this.isRemember === true) {
            this.setCookie(this.loginForm.username, this.loginForm.password, 7)
          } else {
            this.setCookie('', '', -1)// 清除cookie
          }
            //后面调登录接口
        }
    }
}