element表单账号密码篇-CFANZ编程社区

element表单账号密码篇

一、el-input记住密码之后账号和密码，改变了背景颜色

先看bug图片（背景设置的是透明色，但是记住密码之后账号和密码就自动加了背景色）：

在这里插入图片描述

解决办法：

  .el-input {
    input {
      text-indent: 5px;
      background: transparent;
      border: none;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0;
      color: #333;
      border-bottom: 1px solid rgb(235, 237, 242);
      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #fff inset !important;  //这里#fff是设置和我input框同样颜色
        -webkit-text-fill-color: #333 !important;  //这里是文本框字体颜色
      }
    }
  }

最终完美解决，效果如图：

在这里插入图片描述
二、el-input 输入框浏览器自动填充账号密码问题

原本我的页面不需要自动填充账号密码，但是尽管我设置账号密码为空或者登录之后再退出账号密码置空也会自动填充，关于这个问题我还在纳闷了很久，后来发现只需设置auto-complete="new-password"属性即可，如图：

在这里插入图片描述
如果账号密码是我们所期望要记住的话，可设置auto-complete=“off”，但是当我们切换成注册页面或者新增账号等页面时，还是会把账号密码自动填充，auto-complete可按照具体情况设置即可。

三、实现记住账号密码操作

这里有三种方法来存储账号密码：

1、sessionStorage(不推荐)

仅在当前会话下有效，关闭浏览器窗口后就被清除了
存放数据大小一般为5MB
不与服务器进行交互通信

2、 localStorage

除非主动清除localStorage里的信息，否则将永远存在，关闭浏览器窗口后下次启动任然存在
存放数据大小一般为5MB
不与服务器进行交互通信

3、cookies

可以手动设置过期时间，超过有效期则失效。未设置过期时间，关闭浏览器窗口后就被清除了
存放数据大小一般为4K
每次请求都会被传送到服务器

在这里我使用了第二种方法记住密码localStorage，如图：

在这里插入图片描述

1、密码加密，为提高安全性，密码存储前需进行加密处理。我这里用的base64，下载的版本是2.5.1。

//安装js-base64
npm install --save js-base64

在这里插入图片描述

2、localStorage存储账号密码

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      checked: false,
    };
  },
  mounted() {
    let username = localStorage.getItem("username");
    if (username) {
      this.loginForm.username = localStorage.getItem("username");
      this.loginForm.password = Base64.decode(localStorage.getItem("password")); // base64解密
      this.checked = true;
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password);
            localStorage.setItem("userId", this.loginForm.username);
            localStorage.setItem("password", password);
          } else {
            localStorage.removeItem("username");
            localStorage.removeItem("password");
          }
        }
      });
    },
  },
};