项目需要实现记住密码功能,由于之前没有开发过相关的功能,在查阅资料后,选择了操作cookie来实现。
实现思路:
- 用户输入账号密码后,请求登录接口,响应成功,若勾选了记住密码,就在cookie中存储下登录信息;
- 再次进入登录页面,首先判断是否有登录信息相关的cookie,如果存在则赋值;
通常操作cookie,都需要进行封装一些方法来进行相关操作。不过,这里选择了js-cookie插件,就不用再自行封装了。
js-cookie是一个轻量级的操作cookie的插件
A simple, lightweight JavaScript API for handling cookies
在项目中使用,有如下几种方法:
- 直接下载到本地,在项目中引入
- cdn引入
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
- npm 安装
npm install js-cookie --save
因为项目是vue项目,直接使用npm 安装依赖
在项目中的入口文件(main.js)全局引入
import Cookies from 'js-cookie'
Vue.prototype.$Cookies = Cookies
在用户登录成功时候,设置cookie,保存登录信息,并设置过期时间
this.$Cookies.set('name',value,{expires: 7})
再次进入登录页面,获取cookie
this.$Cookies.get('name')
html结构
<ul>
<li>
<van-field v-model="user_name" left-icon="user" placeholder="请输入用户名">
<van-icon class="iconfont" class-prefix="icon-user" slot="left-icon" name="user" size="20" color="#959695"></van-icon>
</van-field>
</li>
<li>
<van-field v-model="password" type="password" placeholder="请输入密码">
<van-icon class="iconfont" class-prefix="icon-pwd" slot="left-icon" name="pwd" size="20" color="#959695"></van-icon>
</van-field>
</li>
</ul>
<div class="checked-pwd">
<van-checkbox v-model="checked" shape="square">记住密码</van-checkbox>
</div>
<div class="login-btn-wrap">
<van-button round block type="info" @click="submit">登录</van-button>
</div>
js代码
export default {
data() {
return {
user_name: "",
password: "",
checked: false
};
},
created() {
this.getCookies()
},
methods: {
getCookies() {
let loginInfo = this.$Cookies.getJSON("loginInfo") || {}
if (Object.keys(loginInfo).length) {
this.user_name = loginInfo.user_name
this.password = loginInfo.password
this.checked = loginInfo.checked
} else {
this.user_name = ""
this.password = ""
this.checked = false
}
},
submit() {
if (!this.user_name || !this.password) {
this.$toast("请完善登录信息")
} else {
let reg = /^1[3456789]\d{9}$/
if (!reg.test(this.user_name)) {
this.$toast("请输入正确的手机号")
} else {
this.login()
}
}
},
async login() {
let res = await this.$http.login({
user_name: this.user_name,
password: this.password
});
if (res && res.code == 0) {
localStorage.setItem("token", res.data.token)
if (this.checked) {
let time = new Date(new Date().getTime() + 15 * 60 * 1000) // 15分钟后过期
this.$Cookies.set(
"loginInfo",
{
user_name: this.user_name,
password: this.password,
checked: this.checked
},
{ expires: time }
);
} else {
this.$Cookies.remove("loginInfo")
}
this.$toast({
type: "success",
message: "登录成功",
forbidClick: true,
onClose: () => {
this.$router.push("/home")
},
});
} else {
this.$toast.fail(res.msg)
}
}
}
}
注意
如果存储对象,可以使用下面的方法取出数据
this.$Cookies.getJSON("name")
# or
JSON.parse("name")
更多cookie设置,查看官方文档 js-cookie