vue 实现记住密码

实现功能：

1. 记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内
2. 不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入

大致思路，通过对cookie的存、取、删来实现记住密码与否；选中记住密码，在点击登录的时候将用户名密码存入cookie，每次进入登录页面的时候先读取cookie，如果浏览器的cookie中有账号密码则自动填入登录框，效果图如下：

直接上代码

HTML 部分：

<template>
  <div class="login">
    <van-form>
      <van-field
        :colon='true'
        :scroll-to-error='true'
        v-model='loginData.username'
        name='用户名'
        label='用户名'
        placeholder='请输入用户名'
        :rules='[{ required: true, message: "请填写用户名" }]'
      ></van-field>
      <van-field
        :scroll-to-error='true'
        v-model='loginData.password'
        type='password'
        name='密码'
        label='密码'
        placeholder='请输入密码'
        :rules='[{ required: true, message: "请填写密码" }]'
      ></van-field>
      <van-checkbox v-model="checkbox" shape="square" class="checkBox">记住密码</van-checkbox>
      <div style='margin: 16px;'>
        <van-button round block type='info' native-type='submit' @click="login()">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

JS 部分：

export default {
  data () {
    return {
      loginData: {
        username: '',
        password: ''
      },
      checkbox: true
    }
  },
  mounted () {
    // 页面加载获取cookie
    this.getCookie()
  },
  methods: {
    async login () {
      let _this = this
      const {data: res} = await _this.$http.post('login', _this.loginData)
      console.log('============', res)
      if (res.meta.status === 200) {
        window.sessionStorage.setItem('logintoken', res.data.token)
        _this.$router.push('/index')
        if (_this.checkbox === true) { // 选中记住密码，将用户名密码存入cookie
          _this.setCookie(_this.loginData.username, _this.loginData.password, 7)
        } else {
          _this.clearCookie() // 清除cookie
        }
        this.$toast(res.meta.msg) // 登录成功提示
      } else {
        this.$toast(res.meta.msg) // 登录失败提示
      }
    },
    // 设置cookie
    setCookie (cname, cpwd, exdays) {
      var d = new Date()
      d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
      var expires = 'expires=' + d.toGMTString()
      document.cookie = 'username' + '=' + cname + ';' + expires
      document.cookie = 'password' + '=' + cpwd + ';' + expires
    },
    // 获取cookie
    getCookie () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split(';') // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          // 判断查找相对应的值 将cookie中的值填入页面
          debugger
          if (arr2[0].trim() === 'username') {
            this.loginData.username = arr2[1]
          } else if (arr2[0].trim() === 'password') {
            this.loginData.password = arr2[1]
          }
        }
      }
    },
    // 清除cookie
    clearCookie () {
      this.setCookie('', '', -1)
    }
  }
}