vue实现禁止浏览器记住密码功能__Vue.js
发布于 1 个月前 作者 banyungong 272 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

贡献主题:https://github.com/xitu/juejin-markdown-themes

theme: mk-cute highlight:

查找资料

网上查到的一些方法:

  1. 使用 autocomplete=“off”(现代浏览器许多都不支持)
  2. 使用 autocomplete=“new-password”
  3. 在真正的账号密码框之前增加相同 name 的 input 框
  4. 使用 readonly 属性,在聚焦时移除该属性
  5. 初始化 input 框的 type 属性为 text,聚焦时修改为 password
  6. 使用 type=“text”,手动替换文本框内容为星号 “*” 或者 小圆点 “●”

实现过程

用到的字段

data() {
	return {
    	username: '',
        password: '',
    }
}

由于 autocomplete=“off” 现代浏览器已经不支持,所以直接放弃了对密码框设置,直接使用 autocomplete=“new-password” ,亲测Chrome(v88.0.4324.104)、edge(v88.0.705.56)及火狐(v67)可用,但火狐(v85)还是会提示记住密码。

<el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="password" type="password" name="pwd" id="pwd" placeholder="密码" autocomplete="new-password"></el-input>

参考:

https://developer.mozilla.org/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility

在解决火狐高版本提示的过程中,试验了3/4/5的方法,结果都不如人意,但发现火狐浏览器只要最终密码框里的值为星号 “*” 或者小圆点 “●” 时,就不会提示记住密码(不知是否正确,可自行测试),于是新增字段 pwdCover 用于关联输入框,实际传值用 password。

templete

<el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="pwdCover" type="password" name="pwd" id="pwd" placeholder="密码" autocomplete="new-password"@input="setPassword"></el-input>

script

data() {
	return {
    	username: '',
        password: '',
        pwdCover: '',
    }
},
method: {
	login() {
    	this.pwdCover = this.pwdCover.replace(/\S/g, '●');
        // 登录请求,失败时恢复pwdCover
        this.pwdCover = this.password;
    },
    setPassword(val) {
    	this.password = val;
    }
}

自信满满发给了项目上的同事,结果翻车了,现场环境:

  • 操作系统:Windows7、Windows10
  • 浏览器:Chrome v74.0.3729.108 我安装同版本的谷歌浏览器之后发现问题还是没有出现,而我的操作系统是 Windows10,不知是哪里出了问题,最终还是选择了方法6

最终

templete

<el-form-item>
	<el-input v-model="username" type="text" name="text" placeholder="账号" autocomplete="off"><i slot="prefix" class="el-input_icon el-icon-user"></i></el-input>
</el-form-item>
<el-form-item>
	<el-input v-model="pwdCover" type="text" name="pwd" id="pwd" placeholder="密码" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input>
</el-form-item>

script

setPassword(val) {
    let reg = /[0-9a-zA-Z]/g; // 只允许输入字母和数字
    let nDot = /[^●]/g; // 非圆点字符
    let index = -1; // 新输入的字符位置
    let lastChar = void 0; // 新输入的字符
    let realArr = this.password.split(''); // 真实密码数组
    let coverArr = val.split(''); // 文本框显示密码数组
    let coverLen = val.length; // 文本框字符串长度
    let realLen = this.password.length; // 真实密码长度
    // 找到新输入的字符及位置
    coverArr.forEach((el, idx) => {
        if(nDot.test(el)) {
            index = idx;
            lastChar = el;
        }
    });
    // 判断输入的字符是否符合规范,不符合的话去掉该字符
    if(lastChar && !reg.test(lastChar)) {
        coverArr.splice(index, 1);
        this.pwdCover = coverArr.join('');
        return;
    }
    if (realLen < coverLen) {
      	// 新增字符
      	realArr.splice(index, 0, lastChar);
    } else if (coverLen <= realLen && index !== -1) {
        // 替换字符(选取一个或多个字符直接替换)
        realArr.splice(index, realLen - (coverLen - 1), lastChar);
    } else {
        // 删除字符,因为 val 全是 ● ,没有办法匹配,不知道是从末尾还是中间删除的字符,删除了几个,不好对 password 处理,所以可以通过光标的位置和 val 的长度来判断
        let pos = document.getElementById('pwd').selectionEnd; // 获取光标位置
        realArr.splice(pos, realLen - coverLen);
    }
    // 将 pwdCover 替换成 ●
    this.pwdCover = val.replace(/\S/g, '●');
    this.password = realArr.join('');
},

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: crystal_yx 原文链接:https://juejin.im/post/6924872565672706062

回到顶部