current position:Home>Element form account password

Element form account password

2022-04-29 05:17:27Angel's kind

element Form account password

One 、el-input After remembering the password, the account and password , Changed the background color

First look at bug picture ( The background is set to transparent color , But after remembering the password, the account and password will automatically add the background color ):

 Insert picture description here

terms of settlement :

  .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;  // here #fff It's set up with me input Same color as box 
        -webkit-text-fill-color: #333 !important;  // Here is the text box font color 
      }
    }
  }

A perfect solution , The effect is as shown in the picture :

 Insert picture description here
Two 、el-input The input box browser will automatically fill in the account and password questions

Originally, my page does not need to automatically fill in the account password , However, even if I set the account password to blank or log in and then exit the account, the password will be automatically filled in , I've been wondering about this for a long time , Just find out later auto-complete="new-password" Attribute is enough , Pictured :

 Insert picture description here
If the account password is what we expect to remember , Can be set up auto-complete=“off”, But when we switch to the registration page or new account page , It will still automatically fill in the account and password ,auto-complete It can be set according to specific conditions .

3、 ... and 、 Realize the operation of remembering account and password

Here are three ways to store account passwords :

1、sessionStorage( Not recommended )

  • Valid only in current session , It is cleared after closing the browser window
  • The size of stored data is generally 5MB
  • No interactive communication with the server

2、 localStorage

  • Unless you take the initiative to remove localStorage Information in , Otherwise it will exist forever , The next time you start the browser, the window will be closed
  • The size of stored data is generally 5MB
  • No interactive communication with the server

3、cookies

  • You can manually set the expiration time , Beyond the validity period, it will become invalid . Expiration time is not set , It is cleared after closing the browser window
  • The size of stored data is generally 4K
  • Every request is sent to the server

Here I use the second method to remember the password localStorage, Pictured :

 Insert picture description here

1、 Password encryption , To improve security , The password needs to be encrypted before storage . I used it here base64, The download version is 2.5.1.

// install js-base64
npm install --save js-base64

 Insert picture description here

2、localStorage Store account and password

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 Decrypt 
      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");
          }
        }
      });
    },
  },
};

The effect is as shown in the picture ( The password is encrypted ):

 Insert picture description here
There are questions about form login that I don't understand , Comments are welcome , I will reply to you as soon as possible , Our goal is : Help each other , Common progress !!!

copyright notice
author[Angel's kind],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261122125562.html

Random recommended