vue+elementUl实现登录记住密码功能

最新推荐文章于 2024-04-09 15:57:51 发布
最新推荐文章于 2024-04-09 15:57:51 发布
阅读量3.7k 收藏 28
点赞数 8
分类专栏： element-ui Vue.js 项目实战经验
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39089928/article/details/110231770
版权

效果

思路：

采用cookie保存账户和密码。

如果勾选了记住密码，将用户名和密码保存在cookie中，设置cookie中数据保存的时间，过期清除cookie保存的值，

每次新登录的时候，获取本地保存的cookie值。

 

代码解析：

<el-input>标签加show-password可以控制密码的显示和隐藏

<el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>
通过checked字段控制记住密码是否被选中，初始设为false。

 


                

        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  吴小花的博客
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    8
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    28
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
vue element-plus后台管理系统项目-登录、记住密码功能

				
			

			

				

					总结前端开发中遇到的问题，分享前端知识
				

				

					10-09
					
					4479
					
				

			

		

		

			
				
功能介绍：登录、记住密码功能实现；登录账号、密码添加规则验证；记住密码，默认保存7天，有效期内下次可直接跳转首页，非有效期需要重新输入账号、密码进行登录....

			
		

	



                

              
                



	

		

			

				
					
vue登录页-记住密码功能

				
			

			

				

					10-05
				

			

		

		

			
				
vue登录页-记住密码功能

1.下载jsencrypt 加密解密插件
npm install jsencrypt --dev
2.引用src-utils -jsencrypt.js文件，
3.登录页先引用-代码如下

import Cookies from 'js-cookie'//cook引用 2021-08-09
import { encrypt, decrypt } from '@/utils/jsencrypt'//rememberMe-password加密


1.加载页面使用getCookie存下
created(){
this.getCookie();
},
getCookie() {//rememberMe功能
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},

2.登录按钮里面写下面代码
if (this.loginForm.rememberMe) {//rememberMe功能
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
}

			
		

	



                


  
              

                


	

		

			

				
					
前端vue+elementUI如何实现记住密码功能

				
			

			

				

					10-14
				

			

		

		

			
				
主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

			
		

	





	

		

			

				
					
vue+element-ui 记住密码

				
			

			

				

					qq_1307495的博客
				

				

					04-19
					
					1692
					
				

			

		

		

			
				
实现，勾选多选框记住密码
实现思路是判断是否点击记住密码，点击就将账户和密码写到cookie中，设置存储时间，下次登录就会自动记住密码点击登录按钮就可以登录，若未选择记住密码，则不会记住密码
记住一点：密码和账户需要加密保存，保证安全。
<el-checkbox v-model="checked" class="font-16 text-green hk-cursor">记住密码&lt...

			
		

	



		

			
		



	

		

			

				
					
vue 记住密码功能

					
最新发布

				
			

			

				

					guoruijun_2012_4的专栏
				

				

					04-09
					
					126
					
				

			

		

		

			
				
【代码】vue 记住密码功能。

			
		

	





	

		

			

				
					
前端vue+elementUI记住密码功能

				
			

			

				

					mingze6576的博客
				

				

					01-03
					
					4069
					
				

			

		

		

			
				
既然是记住密码，前端也就是使用cookie保存，访问时用cookie读取
先来了解下cookie的基本使用吧
Cookie
所有的cookie信息都在document.cookie中存放着，是一个字符串，里面的cookie以分号和空格分隔。就像这样：
	"key1=value1; key2=value2; key3=value3"
	// 使用document.cookie 来获取所有cookie...

			
		

	





	

		

			

				
					
Vue+element+cookie记住密码功能的简单实现方法

				
			

			

				

					10-14
				

			

		

		

			
				
总之，实现Vue+Element+Cookie的记住密码功能，需要理解Vue.js的响应式数据绑定、事件处理，以及如何使用Element UI构建表单，同时还需要掌握Cookie管理和加密算法。通过这些技术，我们可以为用户提供一个便捷且安全...

			
		

	





	

		

			

				
					
vue+springboot+redis+kaptcha实现登录验证码

				
			

			

				

					04-10
				

			

		

		

			
				
vue+springboot+redis+kaptcha实现登录页验证码

			
		

	





	

		

			

				
					
Vue+element+cookie实现记住密码功能

				
			

			

				

					qq_40788898的博客
				

				

					09-18
					
					2728
					
				

			

		

		

			
				
实现功能：
1、登录时勾选记住密码，用cookie保存账号和密码并对密码进行两次加密处理（纯前端），下次登录自动输入账号密码
2、登录时不勾选，清空cookie，下次登录需要输入
效果图：

================================================================================================================================================================

			
		

	





	

		

			

				
					
Vue+element 解决浏览器自动填充记住的账号密码问题

				
			

			

				

					10-16
				

			

		

		

			
				
我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中，如何实现此功能呢，下面小编给大家介绍下，感兴趣的朋友一起看看吧

			
		

	





	

		

			

				
					
16. Vue-element-template记住密码

				
			

			

				

					从器之道 从一而终
				

				

					05-30
					
					770
					
				

			

		

		

			
				
resources/src/i18n/langs/en/login.js #resources/src/i18n/langs/zh_CN/login.js #resources/src/i18n/langs/zh_HK/login.js 之前已经翻译过 export const login = {……rememberMe: '記住我' ,…… }"> 记住我  < span style = "color: #000;" > {

			
		

	





	

		

			

				
					
VUE实现简单的记住密码功能

				
			

			

				

					Growing up Or Growing old
				

				

					08-27
					
					947
					
				

			

		

		

			
				
用户在进行登录时，常常会在登录页面看到记住密码功能。一般是利用sessionStorage进行储存，这样做也是为了用户方便。



HTML代码：


<div class="login">
  <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
      <h1 class="title"&gt..

			
		

	





	

		

			

				
					
Vue + Element-UI 记住用户名和密码到Cookie

				
			

			

				

					a12hhhe的博客
				

				

					05-11
					
					1825
					
				

			

		

		

			
				
参考链接https://www.cnblogs.com/nxmin/p/8386031.html

实现功能：

1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内
2.不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入


大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号.

			
		

	





	

		

			

				
					
vue登录页面设置记住密码

				
			

			

				

					qq_41713136的博客
				

				

					10-14
					
					2226
					
				

			

		

		

			
				
1
<el-form :model="usermsg" ref="usermsg">
          <el-form-item prop="user" :rules="[{ required: true, message: '用户名不能为空'}]">
            <el-input prefix-icon="iconfont icon-yonghu" 
            type="text" 
            v-model.user.trim

			
		

	





	

		

			

				
					
JavaScript登录记住密码

				
			

			

				

					lihefei_coder的博客
				

				

					03-22
					
					1555
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>记住密码</title>
</head>
<body>
<form id="loginForm">
    <input id="user" type="t

			
		

	





	

		

			

				
					
element-ui 制作登录界面，记住密码功能，账号密码自动填冲解决办法

				
			

			

				

					weixin_38644630的博客
				

				

					01-03
					
					1084
					
				

			

		

		

			
				
element-ui 制作登录界面，记住密码功能，账号密码自动填冲解决办法
 <el-input
   v-model.trim="loginForm.password"
   prefix-icon="el-icon-unlock"
   :placeholder="$t('lang.password')"
    @input="change($event)"
   type="password"
   auto-complete="new-password"></el-input&g

			
		

	





	

		

			

				
					
vue +elementul实现展开和收起功能

				
			

			

				

					10-12
				

			

		

		

			
				
vue和element-ui库提供的element-UI组件可以很容易地实现展开和收起功能。  首先，我们可以使用element-ui的Collapse组件来创建一个可收缩的容器。在需要收起和展开的元素外面包裹一个标签，在其中添加标签作为子...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
吴小花的博客

			
1分也是爱

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值