vue登录页记住密码功能

1. 实现效果

前期准备

1. 安装依赖

npm install --save js-base64

2. 在src目录下的utils文件中创建cooki.js文件，没有utils的话创建一个utils文件夹，cookie.js内容如下：

// 获取cookie
export const getCookie = (key) => {
  if (document.cookie.length > 0) {
    var start = document.cookie.indexOf(key + '=')
    if (start !== -1) {
      start = start + key.length + 1
      var end = document.cookie.indexOf(';', start)
      if (end === -1) end = document.cookie.length
      return unescape(document.cookie.substring(start, end))
    }
  }
  return ''
}
// 保存cookie
export const setCookie = (cName, value, expiredays) => {
  var exdate = new Date()
  exdate.setDate(exdate.getDate() + expiredays)
  document.cookie = cName + '=' + decodeURIComponent(value) +
        ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
}

功能实现

在登录页面

<script>
// 引入依赖
import { getCookie, setCookie } from '@/utils/cookie.js'
const Base64 = require('js-base64').Base64

export default {
  name: 'loginIndex',
  components: {},
  data () {
    return {
      loginForm: {
        userName: '',
        password: '',
        remember: false
      }
    }
  },
  created () {
    // 在页面加载时从cookie获取登录信息
    const userName = getCookie('userName')
    const passWord = Base64.decode(getCookie('passWord'))
    // 如果存在赋值给表单，并且将记住密码勾选
    if (userName) {
      this.loginForm.userName = userName
      this.loginForm.password = passWord
      this.loginForm.remember = true
    }
  },
  methods: {
    doLogin () {
      if (
        this.loginForm.userName === 'admin' &&
        this.loginForm.password === '123'
      ) {
        // 储存登录信息
        this.setUserInfo()
        this.$router.push('/home')
      }
    },
    // 储存表单信息
    setUserInfo () {
      // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
      // 如果没有勾选，储存的信息为空
      if (this.loginForm.remember) {
        setCookie('userName', this.loginForm.userName)
        // base64加密密码
        const passWord = Base64.encode(this.loginForm.password)
        setCookie('passWord', passWord)
      } else {
        setCookie('userName', '')
        setCookie('passWord', '')
      }
    }
  }
}
</script>