vue中cookies的使用
有时候做登录时会有一个记住密码的需求,这个时候可以使用cookies把账号密码存起来,下次再进来就免去了输入账号密码的需求,
- 如图:
原生cookies操作比较麻烦
这里我们使用js-cookies,先下载:
npm install --save js-cookie
安装成功后在需要的地方进行调用:
import Cookies from "js-cookie";
先看看在data中定义的表单数据:
data() { return { //登录表单 loginForm: { username: "", //用户名 password: "", //密码 captcha: "", //验证码的值 isRemember: false, //是否记住密码 }, } },
写在methods中的函数:
created() { //一进页面就先获取cookies里面的参数 this.getCookie() }, methods: { // 获取cookie参数 getCookie() { const username = Cookies.get("username"); const password = Cookies.get("password"); const isRemember = Cookies.get("isRemember"); this.loginForm.username = username == undefined ? this.loginForm.username : username; this.loginForm.password = password == undefined ? this.loginForm.password : decrypt(password); this.loginForm.isRemember = isRemember == undefined ? false : Boolean(isRemember); Cookies.remove('data'); }, }, onLogin() { //点击登录函数时,如果勾选记住密码 if (this.loginForm.isRemember) { // 把账号密码等参数存到cookies,设置时间为30天 Cookies.set("username", this.loginForm.username, { expires: 30, }); Cookies.set("password", this.loginForm.password, { expires: 30, }); Cookies.set("isRemember", this.loginForm.isRemember, { expires: 30, }); } else { //如果此时没有勾选记住密码,就把cookies里面的参数移除 Cookies.remove("username"); Cookies.remove("password"); Cookies.remove("isRemember"); } //把登录名和用户名存好后,开始发接口请求数据,此处省略.... },
cookies的使用方式:储存、获取、删除三种
- 存:
Cookies.set('userName', '嘻嘻嘻', { expires: 3 });
- 取:
JSON.parse(Cookies.get('userName'))
- 删:
Cookies.remove('userName')
总结
大功告成,完结~
以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。