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