Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "Vue how to login to remember the account password function", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Vue how to log in to remember the account password function"!

Realization idea

If the "remember me" function option is checked when the user logs in, the login name and password (encrypted) will be saved in the local cache, and the saved account and password will be automatically obtained when the login page is loaded next time (need to be decrypted) and echoed to the login input box.

There are three ways to store account passwords:

1. SessionStorage (not recommended)

1)。 Valid only in the current session, cleared after closing the browser window

2)。 The size of stored data is generally 5MB.

3)。 Do not interact with the server

2. LocalStorage

1)。 Unless you take the initiative to clear the information in the localStorage, it will exist forever, and the next startup will still exist after closing the browser window.

2)。 The size of stored data is generally 5MB.

3)。 Do not interact with the server

3. Cookies

1)。 The expiration time can be set manually. If the expiration date exceeds the expiration date, it will expire. The expiration time is not set, it is cleared after closing the browser window.

2)。 The size of stored data is generally 4K.

3)。 Each request is sent to the server

This paper mainly introduces the second and third methods of use.

Functional interface

Remember I forgot my password? Login to remember the account password function of the specific implementation of password encryption

In order to improve the security, the password needs to be encrypted before it is stored. At present, there are many encryption methods, and I choose base64 here.

Npm installation base64 dependency

/ / install npm install-- save js-base64// introduces const Base64 = require ("js-base64"). Base64localStorageexport default {data () {return {loginForm: {userId: ", password:",}, checked: false,};}, mounted () {let username = localStorage.getItem ("userId") If (username) {this.loginForm.userId = localStorage.getItem ("userId"); this.loginForm.password = Base64.decode (localStorage.getItem ("password")); / / base64 decryption this.checked = true }, methods: {submitForm (formName) {this.$ refs [formName] .validate ((valid) = > {if (valid) {/ *-Storage of account password-* / if (this.checked) {let password = Base64.encode (this.loginForm.password) / / base64 encryption localStorage.setItem ("userId", this.loginForm.userId); localStorage.setItem ("password", password);} else {localStorage.removeItem ("userId"); localStorage.removeItem ("password") } / *-http login request-* /} else {console.log ("error submittal!"); return false;}});},},}

Cookiesexport default {data () {return {loginForm: {userId: ", password:",}, checked: false,};, mounted () {this.getCookie () }, methods: {submitForm (formName) {this.$ refs [formName] .validate ((valid) = > {if (valid) {/ *-Storage of account password-* / if (this.checked) {let password = Base64.encode (this.loginForm.password) / / base64 encryption this.setCookie (this.loginForm.userId, password, 7);} else {this.setCookie (",",-1) / / modify 2 values are empty, the number of days is minus 1 day} / *-http login request-* /} else {console.log ("error submittal!"); return false;}}) }, / / set cookie setCookie (userId, password, days) {let date = new Date (); / / get time date.setTime (date.getTime () + 24 * 60 * 60 * 1000 * days); / / number of days saved / / string concatenation of cookie window. [XSS _ clean] = "userId" + "=" + userId + "; path=/;expires=" + date.toGMTString () Windows. [XSS _ clean] = "password" + "=" + password + "; path=/;expires=" + date.toGMTString ();}, / / read cookie to echo the user name and password to the input box getCookie () {if ([xss_clean] .split > 0) {let arr = [xss_clean] .split (";") / / split into separate "key=value" forms for (let I = 0; I < arr.length; iTunes +) {let arr2 = arr [I] .split ("="); / / cut again, arr2 [0] is the key value, arr2 [1] is the corresponding value if (arr2 [0] = = "userId") {this.loginForm.userId = arr2 [1] } else if (arr2 [0] = "password") {this.loginForm.password = Base64.decode (arr2 [1]); / / base64 decryption this.checked = true;}},},}

At this point, I believe you have a deeper understanding of "how to log in and remember the account password function of Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.