AJ-Report项目分析（13）

2021SC@SDUSC

接着分析登录源码，上篇文章分析到了loginApi方法 ，源码如下：

async loginApi() {
      let obj = {
        loginName: this.loginForm.loginName,
        password: transPsw(this.loginForm.password),
        verifyCode: ""
      };
      const { code, data } = await login(obj);
      this.loading = false;
      if (code != "200") return;
      setToken(data.token);
      setAccessUser(data);
       this.rememberPsw &&
        cookies.set(
          `u_${this.loginForm.loginName}`,
          Encrypt(this.loginForm.password),
          { expires: 15 }
        );
      if (data && data.captcha) {
        this.needCaptcha = true;
      } else {
        this.needCaptcha = false;
        this.$router.push({
          path: this.redirect || "/index",
          query: this.otherQuery
        });
      }
    },

登录方法

这个方法是整个登录源码的核心方法。执行流程如下：

1. 首先将我们输入的用户名和密码存入obj对象中。

2. 调用await login方法，obj作为参数传入。页面有如下语句：

import { login } from "@/api/login";

这说明接口定义与api/login下，源码如下：

export function login (data) {
  return request({
    url: accessUser/login,
    method: post,
    data
  })
}

此方法发送一个post请求，返回值赋给了code和data。

3. 判断返回码code是否为200

4. 调用setToken，setAccessUser，引入语句为：

import { setToken, setAccessUser } from "@/utils/auth";

源码为：

export function setToken(token) {
  return setStorageItem(TokenKey, token)
}

export function setAccessUser(accessUser) {
  return setStorageItem(AccessUserKey, accessUser)
}

源码内调用了setStorageItem方法，源码如下：

export function setStorageItem(k, v) {
  if(typeof(v) == "undefined" || v == null){
    return;
  }

  var val = v;
  if(typeof(v) == "object"){
    val = JSON.stringify(v);
  }
  localStorage.setItem(k, val)
}

这两个方法实现了将token和用户权限存储起来。

5. 如果选中了记住密码，就存储到cookie中：

this.rememberPsw &&
        cookies.set(
          `u_${this.loginForm.loginName}`,
          Encrypt(this.loginForm.password),
          { expires: 15 }
        );

其中Encrypt是在utils/index.js中的方法，源码如下：

export function Encrypt (word) {
  const srcs = CryptoJS.enc.Utf8.parse(word + getUUID())
  const encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
  return encrypted.ciphertext.toString().toUpperCase()
}

这个是加密方法，将我们的password加密。所以cookie的set功能就是将用户名作为key，加密之后的password作为value，存储到本地，并设置时效expries为15天。

6. 设置needCaptCha的值，表明是否需要验证码。

感悟

至此，aj-report项目的分析。在第2-13篇文章中，我陆续分析了"用户权限"和"系统设置"下面的前端页面，中间穿插分析了url的发送与生成，以及token的实现。原本有些vue基础的我，在刚开始看源码的时候也是很懵的，后来先从整体架构开始了解，再分析具体页面就轻松许多

通过这13篇文章，我重新认识到了对于一个大项目，前端工作量与复杂程度之大；同时，我也学习了很多vue的知识，以及前端开发时的一些规范，比如说重复用的页面元素单独拿出来做一个组件，就像这个项目里面的anji-crud；还有就是权限的管理，token的存储以及密码的加密等等，总的来说受益匪浅。