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的存储以及密码的加密等等,总的来说受益匪浅。

上一篇:PHP笔记-用户登录例子


下一篇:界面控件DevExpress WinForm - MVVM命令讲解(二)