Vue 登录 记住密码，设置存储时间
一、手动存储
login.vue
提示：
javascript
// 设置cookie方法
setCookie(loginName, password, days) {
let text = encryptDes(password, '@des123')//使用des方法加密，秘钥'@des123'
let saveDays = new Date() //获取时间
saveDays.setTime(saveDays.getTime() + 24 * 60 * 60 * 1000 * days) //保存的天数
// 字符串拼接存入cookie
window.document.cookie = 'loginName' + '=' + loginName + ';path=/;saveDays=' + saveDays.toGMTString()
window.document.cookie = 'password' + '=' + text + ';path=/;saveDays=' + saveDays.toGMTString()
},
// 读取cookie
getCookie() {
if (document.cookie.length > 0) {
let arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
for (let i = 0; i < arr.length; i++) {
let arr2 = arr[i].split('=') // 再次切割
// 这里会切割出以loginName为第0项的数组、以password为第0项的数组，判断查找相对应的值
if (arr2[0] == 'loginName') {
this.loginForm.loginName = arr2[1] // 拿到账号
} else if (arr2[0] == 'password') {
// 拿到拿到加密后的密码arr2[1]并解密
let bytes = decryptDes(arr2[1].toString(), '@des123')
// let plaintext = bytes.toString(CryptoJS.enc.Utf8); // 拿到解密后的密码（登录时输入的密码）
// this.loginForm.password = plaintext;
this.loginForm.password = bytes
}
}
}
},
// 清除cookie
clearCookie() {
this.setCookie('', '', 0) //账号密码置空，天数置0
},二、使用vue-cookies插件
main.js
javascript
// coolie存储
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)login.vue
javascript
if (this.isRememberPwd === true) { // 传入账号，密码，保存天数
this.setLocal(this.loginName, this.password)
} else { // 清除cookie
this.removeLocal()
}
// 设置cookies
setLocal(loginName, password) {
let text = encryptDes(password, '@des123')//使用des方法加密，秘钥'@des123'
const days = '60 * 60 * 24 * 7' // 60秒*60分*24小时*7天
this.$cookies.set('loginName', loginName, days)
this.$cookies.set('password', text, days)
},
// 读取cookies
getLocal() {
if (this.$cookies.get("loginName"))
this.loginName = this.$cookies.get("loginName") // 拿到账号
if (this.$cookies.get("password"))
this.password = decryptDes(this.$cookies.get("password"), '@des123') // 拿到密码
},
// 清除cookie
removeLocal() {
this.$cookies.remove("loginName")
this.$cookies.remove("password")
},