博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue项目实现记住密码功能
阅读量:5094 次
发布时间:2019-06-13

本文共 2750 字,大约阅读时间需要 9 分钟。

一.谷歌浏览的残留问题

  现在很多的网站都有一个需求是记住密码这个功能,为的是避免用户下次登录的时候繁琐的输入过程。

  像是一些主流的浏览器(比如Chrome)都有了这个功能,而且如果你登录了Chrome账号,会永久的保存在你的账号中,在任意设备中只要你登录你的Chrome账号,都会有你保存的账号密码信息。

 

 

但是Chrome浏览器有一个bug(其实也不是bug,只是人家当初就这么设计的),如果你选择了保存密码,在你下次登录的时候,你的登录表单会变成黄色,就像这样:

原因是Chrome浏览器在给表单赋值的时候不做dom渲染,而且Chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:

input:-webkit-autofill {
  background-color: #FAFFBD;  background-image: none;  color: #000;}

这就很影响视觉,我们可以自己再写一套样式将其覆盖:

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset; //使用足够大的纯色内阴影覆盖黄色背景 border: 1px solid #CCC!important;}

这样就去掉了谷歌浏览器输入框默认的黄色背景,如果你不想要浏览器默认的保存密码功能,你可以在输入框前边再加一个隐藏的输入框就去掉了该功能

二.记住密码功能的实现

 

  目前,前端实现记住密码功能有两种方式:1.浏览器自带保存功能(上边提到,这个相对安全)2.将登陆信息储存在cookie中

下面我们说一下第二种方法的实现思路:

  1.在向后台提交登陆信息成功后,判断用户是否勾选记住密码,如果勾选,将账号,密码以及token(需要封装拦截器)储存在cookie中,如果没勾选,向cookie中存入账号和密码字段为空

  2.密码需要加密,目前加密方式有很多种sha1,base64和md5等,我采用的是base64

  3.npm安装base64依赖:

// 安装npm install --save js-base64// 引入const Base64 = require('js-base64').Base64

 4.在页面加载时从cookie中获取登录信息,判断是否存在,如果存在,需要先将密码解密,将其赋值给登录表单,并将记住密码选择框勾选

 

废话不多说了,直接附上完整代码:

 

 

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset; //使用足够大的纯色内阴影覆盖黄色背景 border: 1px solid #CCC!important;}

这样就去掉了谷歌浏览器输入框默认的黄色背景,如果你不想要浏览器默认的保存密码功能,你可以在输入框前边再加一个隐藏的输入框就去掉了该功能

 

二.记住密码功能的实现

 

  目前,前端实现记住密码功能有两种方式:1.浏览器自带保存功能(上边提到,这个相对安全)2.将登陆信息储存在cookie中

下面我们说一下第二种方法的实现思路:

  1.在向后台提交登陆信息成功后,判断用户是否勾选记住密码,如果勾选,将账号,密码以及token(需要封装拦截器)储存在cookie中,如果没勾选,向cookie中存入账号和密码字段为空

  2.密码需要加密,目前加密方式有很多种sha1,base64和md5等,我采用的是base64

  3.npm安装base64依赖:

// 安装npm install --save js-base64// 引入const Base64 = require('js-base64').Base64

 

  4.在页面加载时从cookie中获取登录信息,判断是否存在,如果存在,需要先将密码解密,将其赋值给登录表单,并将记住密码选择框勾选

 

废话不多说了,直接附上完整代码:

 

 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

 
 
标签:  ,  ,  , 
好文要顶  关注我  收藏该文 
 
 
 
+加关注
1
0
 
 
 
上一篇:
下一篇:
posted @ 
2018-12-30 17:40   阅读(
1143) 评论(
0)   

 

 
 

转载于:https://www.cnblogs.com/mica/p/10879554.html

你可能感兴趣的文章
32位与64位 兼容编程
查看>>
iframe父子页面通信
查看>>
map基本用法
查看>>
Redis快速入门
查看>>
BootStrap---2.表格和按钮
查看>>
Linear Algebra lecture 2 note
查看>>
CRC计算模型
查看>>
Ajax之404,200等查询
查看>>
Aizu - 1378 Secret of Chocolate Poles (DP)
查看>>
csv HTTP简单表服务器
查看>>
OO设计的接口分隔原则
查看>>
数据库连接字符串大全 (转载)
查看>>
java类加载和对象初始化
查看>>
对于负载均衡的理解
查看>>
django简介
查看>>
window.event在IE和Firefox的异同
查看>>
常见的js算法面试题收集,es6实现
查看>>
IO流写出到本地 D盘demoIO.txt 文本中
查看>>
(转)linux sort,uniq,cut,wc命令详解
查看>>
关于ExecuteNonQuery执行的返回值(SQL语句、存储过程)
查看>>