当前位置: 首页 > Web前端 > vue.js

vue登录页面实现使用cookies记住密码7天的功能

时间:2023-03-31 22:45:10 vue.js

在问题描述项目的登录页面,会有一个要求记住密码7天的功能。这篇文章记录了写法,主要是用cookies,并且把我写的东西都注释了,写的很详细,大家可以看看我写的注释的步骤,还是比较详细的。亲测有效html部分代码图标效果图标代码贴

loginjs部分代码粘贴exportdefault{name:"login",data(){return{form:{userName:'',loginPwd:'',},isRemember:false,};},mounted(){//第一步,在页面加载的时候,首先检查cookie中是否有用户名和密码。你可以使用this.getCookie();},methods:{/*第三步,当用户进行登录操作时,首先检查用户名和密码对,如果不正确,会提示登录错误。如果正确,检查用户是否勾选了记住密码。如果没有,请及时清除cookie。回到初始状态。如果勾选,将用户名和密码保存到cookie中设置7天有效期以供使用(当然也可以是更新前的cookie时间)*/asyncloginPage(){//发送请求看看如果用户输入的用户名和密码正确constres=awaitthis.$api.loginByUserName(this.form)if(res.isSuccess==false){this.$message.error("loginerror")}否则{constself=this;//第四步,如果复选框被勾选如果选择,调用设置cookie的方法,设置为在cookie中保存之前的用户名、密码和过期时间if(self.isRemember===true){//传入账号名、密码、保存天数(过期时间)3个参数//1/24/60测试可以测试一分钟,这样会比较明显self.setCookie(this.form.userName,this.form.loginPwd,1/24/60);//self.setCookie(this.form.userName,this.form.loginPwd,7);//这个是7天过期时间}//如果没有勾选,及时清除cookie,因为这个cookie可能是最后一个未过期的cookie,所以要及时清除else{self.clearCookie();}//当然,不管用户有没有检查cookie,路由重定向还是this.$router.push({name:"project",});}},//设置cookiesetCookie(username,password,exdays){varexdate=newDate();//获取当前登录时间exdate.setTime(exdate.getTime()+24*60*60*1000*exdays);//设置当前登录时间time加上7天就是cookie的过期时间,也就是保存的天数。//字符串拼接cookie,因为cookie是以name=value的形式存储的window.document.cookie="userName"+"="+username+";path=/;expires="+exdate.toGMTString();window.document.cookie="userPwd"+"="+密码d+";path=/;expires="+exdate.toGMTString();window.document.cookie="isRemember"+"="+this.isRemember+";path=/;expires="+exdate.toGMTString();},//第2步,如果cookie中有用户名和密码,则会分两次切入到表单中,以备使用。如果没有,就没有getCookie:function(){if(document.cookie.length>0){vararr=document.cookie.split(";");//因为是数组,所以需要切割打印出来看看//console.log(arr,"cutting");对于(vari=0;i