AJ-Report项目分析（12）

2021SC@SDUSC

目录

 mounted

密码填充

监听路由对象

登录验证码

本次分析登录页面源码，页面位于src/views/login.vue，页面如下：

 mounted

当我们进入此界面的时候，会触发vue周期函数中的mounted函数：

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

这个函数的作用是获取焦点。focus()方法主要是用于获取焦点，就是自动把光标放到此组件上面，无须用户再次操作。

密码填充

如果我们之前登录过并且记住了密码的话，当我们输入完用户名之后，页面会自动将记录的与用户名对应的密码填充到input框中，这是通过如下方法实现的：

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

cookies.get(key)用户获取与key对应的value。

我们可以通过密码input框的右侧小眼睛控制密码是否显露，这是通过showPwd方法实现的，源码如下：

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

监听路由对象

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

query是vue的router的 路由对象属性，redirect 是路由的重定向属性，这个方法作用是监听路由获取上个路由（from）的地址和参数。

登录验证码

接下来分析登录的验证功能：

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

点击登录按钮后触发handleLogin方法，这里的@click.native.prevent加了prevent，是用来阻止默认事件的，相当于Jquery里面的event.preventDefault方法阻止元素发生默认的行为。handleLogin源码如下：

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

登录操作这里实现了滑动验证码的操作。布尔属性neddCaptcha表明是否需要验证码。验证码方法useVerify源码如下：

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

系统实现的是滑动验证码，验证码源码：

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

如果验证成功，就调用verifylogin回调函数：

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

可以看到回调函数还调用了loginApi，这个方法是一个异步方法，我们下一篇文章分析。