Problem description

In the login page of the project, there will be a function requiring to remember the 7-day password. This article will record the writing method, mainly using cookies. I have written a very detailed annotation, you can take a look at the steps of my annotation, or more detailed. Close test effectively

HTML part

The code shown

Results shown

Paste the code

            <el-form
              ref="form"
              :model="form"
              label-width="80px"
              label-position="top"
              @submit.native.prevent
            >
              <el-form-item label="Username/Account">
                <div class="userError">
                  <el-input
                    size="mini"
                    v-model.trim="form.userName"
                    clearable
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="Password">
                <div class="pwdError">
                  <el-input
                    size="mini"
                    v-model.trim="form.loginPwd"
                    clearable
                    show-password
                  ></el-input>
                </div>
              </el-form-item>
              <el-checkbox label="Remember the account number." v-model="isRemember"></el-checkbox>
              <el-button native-type="submit" size="mini" @click="loginPage"
                >Login < / el - button ></el-form>
Copy the code

Js part

Paste the code

export default {
  name: "login".data() {
    return {
      form: {
        userName: ' '.loginPwd: ' ',},isRemember: false}; },mounted() {
    // The first step is to check the cookie to see if the user name and password can be used when the page loads
    this.getCookie();
  },
  methods: {
    / * in step 3, when the user performs the login operation, first take a look at the user name password is right If not, just login prompt error If yes, just look at the users have checked remember password If not checked, just in time to empty cookie, back to the initial state If checked, the user name and password to cookies and set the period of validity, 7 days For use (of course, it may also be the cookie time before the update) */
    async loginPage() {
      // Send a request to see if the user entered the correct username and password
      const res = await this.$api.loginByUserName(this.form)
      if(res.isSuccess == false) {this.$message.error("Login error")}else{
        const self = this;
        // Step 4: If the check box is checked, the set cookie method is called to save the current user name and password and expiration time in the cookie
        if (self.isRemember === true) {
          // Enter the account name, password, and storage days (expiration)
          // 1/24/60 test can be used for one minute test, so it will be obvious
          self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60);
          // self.setCookie(this.form.userName, this.form.loginPwd, 7); // This is the 7 day expiration time
        } 
        // If it is not checked, clear the Cookie in time. This Cookie may be the last one that has not expired, so clear it in time
        else {
          self.clearCookie();
        }
        // Of course, the route is still to be routed regardless of whether the cookie is checked or not
        this.$router.push({
          name: "project"}); }},/ / set the cookie
    setCookie(username, password, exdays) {
      var exdate = new Date(a);// Get the current login time
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // Add the current login time to 7 days, which is the expiration time, that is, the number of days to save the cookie
      // String concatenation cookie, because the cookie is stored in the form name=value
      window.document.cookie = "userName" + "=" + username + "; path=/; expires=" + exdate.toGMTString();
      window.document.cookie = "userPwd" + "=" + password + "; path=/; expires=" + exdate.toGMTString();
      window.document.cookie = "isRemember" + "=" + this.isRemember + "; path=/; expires=" + exdate.toGMTString();
    },
    // In step 2, if the cookie contains a user name and password, it is cut twice and stored in the form for use. If not, it is not
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); // This is an array. Print it and you'll find out
        // console.log(arr," cut ");
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); // Cut again
          // console.log(arr2," cut 2");
          // // determine to find the corresponding value
          if (arr2[0= = ="userName") {
            this.form.userName = arr2[1]; // Save a copy to save the user name and password
          } else if (arr2[0= = ="userPwd") {
            this.form.loginPwd = arr2[1];/ / can decrypt
          } else if (arr2[0= = ="isRemember") {
            this.isRemember = Boolean(arr2[1]); }}}},/ / remove the cookie
    clearCookie: fu! [image](/img/bVcOHhz)
      this.setCookie(""."", -1); // Clear and set the day to minus 1 day,}}};Copy the code

Cookie storage diagram

conclusion

In fact, it is very simple, is to set an expiration time, that is, the expiration date of the cookie, of course, there need to be some format processing, data processing. Careful friends will find that there is no encryption in the above examples, so you can according to their own company’s situation, choose the corresponding encryption tools. Of course, this practice is more suitable for the background management system, because most of the background management system, are Intranet access. This article just said the train of thought, specific case specific analysis

In addition, the cookie is stored in the browser, the browser is installed in the computer, such as installed in the C disk, so the cookie is stored in a folder in the C disk, that folder not only has cookies, but also localStorage and sessionStorage and other, Which specific folder you can find by yourself. In fact, the so-called local storage is actually stored on their own computer.