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