文章目录
安装依赖
cnpm install js-md5 --save
登录用 md5 对 pwd 加密
登录时候一般需要在发送请求之前对 pwd 加密,同时一个登录往往也涉及 cookies 存储数据,我们知道几个必要信息:
- 登录请求时的 pwd 是 md5 后的
- 登录后存储到 cookies 中的 pwd 是 md5 后的
- formData v-model 到表单的数据,即你手输到表单的 pwd,直接显示是还没有被 md5 的
知道这些信息,即你知道要把 formData 的 pwd md5 之后再请求登录,也知道登录成功后,这个被存储的 pwd 也应该是被 md5 的,所以我们应该怎么设计代码呢?
想法 1:formData 保持 pwd 是原始状态,即未加密的
那么结果是在登录前,formData.pwd 套一层 md5 函数进行请求;最后保存 cookies 时候,pwd 需要再套一层 md5 函数,但是这有一个问题,就是如果有 cookies,那么从 cookies 中提 pwd 赋值给 formData 时候,再请求登录时候又被额外 md5 一次。所以在登录请求前需要额外判定 formData pwd 和 cookies 中 pwd 是否一致,不一致需要 md5(pwd),一致就直接 pwd,不需要套 md5
想法 2:formData 保持 pwd 是 md5 后的状态,即 md5 后的
那么登录前,formData.pwd = md5(formData.pwd);登录后 cookies 中直接赋 formData.pwd,因为它已经是 md5 后的了,这样再下次请求时候,从 cookies 能直接拉到 md5 后的 pwd,然后将其赋给 formData,同样这里有一个判定,如果formData.pwd 和 cookies 中一致,就不需要再给其套 md5 了
我们这里可以按照想法 2 来实现
import reactive from "vue"
import VueCookies from "vue-cookies"
// 一些其他声明
// 如果已经有 cookies 了,就赋值到 formData,formData v-model 到了表单中,loginInfo 中包括用户密码
// 登录请求前,pwd 这个入参到底需不要 md5 的判定
const loginInfo = VueCookies.get("loginInfo")
if (loginInfo === null || formData.password !== loginInfo.password) {
// 只要 formData 中不等于 cookies 中的就要 md5 套一层,最终保证 formData 中始终是 md5 后的
formData.password = md5(formData.password)
}
// 登录请求。。。
// result := 登录请求,result 是响应结果 {code: "", msg: "", data: {}}
// 响应后 cookies 存储用户密码,直接从 formData 取,不需要再 md5 了