关于前端:浏览器记住密码功能引发的问题

一、问题

浏览器主动记住明码是不平安的，因为它记住的都是明文明码。
那么如何不让浏览器记住明码？最简略的做大就是关上浏览器的设置界面，把记住明码性能关掉。然而问题没有这么简略，用户的行为是无法控制的，作为开发者，须要通过编码，来限度用户的行为，防止用户“踩坑”。以下是咱们要解决的问题：

1. 阻止浏览器主动填充明码
2. 解决浏览器兼容问题
3. 从源头上避免浏览器记住明码

二、阻止浏览器主动填充明码

个别 input 标签设置了 type="password" 后，记住明码时浏览器会主动填充用户名和明码。网络上有很多做法，然而大多无奈解决所有问题。以下是我尝试过的办法：

解法一： 在 input 上应用了autocomplete="off"
autocomplete 属性规定输出字段是否应该启用主动实现性能。然而有时候会不起作用，比方在显示页面的时候可能会启用主动实现性能，导致页面显示呈现问题。查阅材料后把属性值改为：new-password，即autocomplete="new-password"，局部浏览器失效了，然而某些浏览器依然能够写入明码。

解法二： 在用户名的最后面放一个暗藏的输入框和一个暗藏是明码框此办法对 IE 无效

解法三： 设置 type=”text” onfocus=”this.type=’password'”。这个办法根本阻止了首次进入页面时浏览器填充明码，然而换火狐浏览器试了一下，在输出数据后再删空数据又会呈现明码填充的下拉提醒。

解法四： 放两个输入框属性全副统一，一个 type=’text’另一个 type=’passward’, 绑定同一个变量，这个变量为空时显示 type=’text’的输入框，并触发 focus 事件, 把光标聚焦到显示的输入框中，另一个暗藏；不为空时则相同。通过测试，ie 浏览器有一个问题，变量从空变成有值时，触发 focus 后，光标是在输入框的最后面，而不是最初面。

  <el-input
  v-show="type==='text'"key="password1"ref="password1"v-model.trim="loginForm.password"type="text"tabindex="2"autocomplete="new-password"@blur="handleBlur"@keyup.native="checkCapslock"@paste.native.capture.prevent="()=>{}"@keyup.enter.native="handleEnter"
  />
  <el-input
  v-show="type==='password'"key="password2"ref="password2"v-model.trim="loginForm.password"type="password"tabindex="2"autocomplete="new-password"@blur="handleBlur"@keyup.native="checkCapslock"@paste.native.capture.prevent="()=>{}"@keyup.enter.native="handleEnter"
  />

 computed: {type() {if (this.loginForm.password) {return 'password'} else {return 'text'}
    }
  },
 watch: {type(val, old) {if (val === 'password') {this.$nextTick(() => {this.$refs.password2.focus()
        })
      } else {this.$nextTick(() => {this.$refs.password1.focus()
        })
      }
    }
  },

三、解决浏览器兼容问题

通过尝试发现没有一种办法可能适配所有浏览器，因而把以上解法一、解法二、解法四都加上，再对呈现问题的局部浏览器做非凡定制解决。以下办法可辨认是什么浏览器

// 获取浏览器
export function getExplorer() {
  var explorer = window.navigator.userAgent
  var compare = function(s) {return (explorer.indexOf(s) >= 0)
  }
  var ie11 = (function() {return ('ActiveXObject' in window)
  })()
  if (compare('MSIE') || ie11) {return 'ie'} else if (compare('Firefox') && !ie11) {return 'Firefox'} else if (compare('Chrome') && !ie11) {if (explorer.indexOf('Edge') > -1) {return 'Edge'} else {return 'Chrome'}
  } else if (compare('Opera') && !ie11) {return 'Opera'} else if (compare('Safari') && !ie11) {return 'Safari'}
  return ''
}


if (getExplorer == 'ie') {alert('以后浏览器内核为 IE 内核，请应用非 IE 内核浏览器！')
}
if (getExplorer == 'Edge') {alert('以后浏览器为 Edge，请应用非 IE 内核浏览器！')
}

例如：让解法四的代码在浏览器为 ie 和 Edge 时不执行，则不会呈现输入框的异样问题。解法二则对这两个浏览器可能失效。

 computed: {type() {if (this.explorer === 'ie' || this.explorer === 'Edge') {return 'password'}
      if (this.loginForm.password) {return 'password'} else {return 'text'}
    }
  },

四、避免浏览器记住明码

解决了明码主动填充的问题，然而，浏览器依然能将输出的明码记住到浏览器，依然是不平安的，因而，须要避免明码被浏览器记录，从源头上切断危险。
通过查问，以及参考友商做法。因为大多数浏览器记录账号密码产生在跳转页面时，读取表单内的信息。所以最终计划：登陆胜利跳转前，清空表单账号密码。

// 登录胜利时
this.loginForm.username = ''this.loginForm.password =''
this.$router.push({path: '/'})