2021SC@SDUSC

catalogue

 mounted

Password filling

Listen for routing objects

Login verification code

The analysis of the login page source code, the page is located in Src / views / login Vue, the page is as follows:

 mounted

When we enter this interface, the mounted function in vue periodic function will be triggered:

mounted() {
    if (this.loginForm.loginName === "") {
      this.$refs.loginName.focus();
    } else if (this.loginForm.password === "") {
      this.$refs.password.focus();
    }
  },

This function is used to get the focus. The focus() method is mainly used to obtain the focus, that is, automatically place the cursor on this component without user operation again.

Password filling

If we have logged in before and remember the password, after we enter the user name, the page will automatically fill the recorded password corresponding to the user name into the input box, which is realized by the following methods:

 getPsw() {
      const cookVal = cookies.get(`u_${this.loginForm.loginName}`);
      this.loginForm.password = cookVal && Decrypt(cookVal);
    },

cookies.get(key) the user gets the value corresponding to the key.

We can control whether the password is revealed through the small eye on the right side of the password input box. This is realized through the showPwd method. The source code is as follows:

    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },

Listen for routing objects

watch: {
    $route: {
       handler: function(route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true
    }
  },

query is the routing object attribute of vue's router, and redirect is the redirection attribute of the route. This method is used to listen to the route and obtain the address and parameters of the previous route (from).

Login verification code

Next, analyze the login authentication function:

  <el-button
          :loading="loading"
          type="primary"
          class="login_btn"
          @click.native.prevent="handleLogin"
          >Sign in</el-button
        >

Click the login button to trigger the handleLogin method, here @ click native. Prevent plus prevent is used to prevent default events, which is equivalent to event in Jquery The preventdefault method prevents the default behavior of the element. The source code of handleLogin is as follows:

 handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
           if (this.needCaptcha) {
            this.useVerify();
            return;
          }
          this.loginApi();
        } else {
          return false;
        }
      });
    },

Login operation here realizes the operation of sliding verification code. The Boolean attribute neddCaptcha indicates whether a verification code is required. The source code of the verification code method useVerify is as follows:

 useVerify() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$refs.verify.show();
        } else {
          return false;
        }
      });
    },

The system implements sliding verification code. The source code of verification code is:

<Verify
      v-if="needCaptcha"
      ref="verify"
      :captcha-type="'blockPuzzle'"
      :img-size="{ width: '400px', height: '200px' }"
      @success="verifylogin"
    />

If the verification is successful, call the verifylogin callback function:

   verifylogin(params) {
      this.loginForm.verifyCode = params.captchaVerification;
      if (this.loginForm.verifyCode) {
        this.loginApi();
      }
    },

You can see that the callback function also calls loginApi. This method is an asynchronous method, which we will analyze in the next article.