欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue单页面应用阻止浏览器记住密码

程序员文章站 2022-11-21 20:28:39
Vue单页面应用阻止浏览器记住密码 ——IT唐伯虎 摘要: Vue单页面应用阻止浏览器记住密码。 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录; 登录完成后vue路由跳转到主页,这时候浏览器提示“是否记住密码”,我选“否”; 然后我点菜单跳转到另一个路由, ......

vue单页面应用阻止浏览器记住密码

                      ——it唐伯虎

摘要: vue单页面应用阻止浏览器记住密码。

 

现象1:路由切换时再次提示“是否记住密码”

  • 登录页面有个密码输入框,输入账号密码进行登录;
  • 登录完成后vue路由跳转到主页,这时候浏览器提示“是否记住密码”,我选“否”;
  • 然后我点菜单跳转到另一个路由,结果浏览器再次提示“是否记住密码”,我再次选“否”;
  • 我接着又一次点菜单跳转到另一个路由,浏览器还会继续提示“是否记住密码”;
  • 除非我刷新一下页面或者选“是”,不然这个提示会不断出现;
  • 这个现象很诡异,只在我的火狐浏览器必现,其他人都没重现。

解决办法:

  • 这其实是个代码bug,在登录页面,用form把输入框都包起来就行了。

 

 

现象2:autocomplete="off"无效

  • 无论是autocomplete="off"还是<input type="password" style="display: none;">,只要点击登录,浏览器就会提示“是否记住密码”

解决办法:

  • (火狐、ie)把button移到form以外就行了;
  • (谷歌)将密码输入框定义为text,聚焦之后才变成password:<input type="text" onfocus="this.type='password'" autocomplete="off">;
  • 另外,我们最好在form内的最顶处加上<input type="password" style="display: none;">,它的作用是,让浏览器把密码填到一个隐藏的密码输入框里面。