代码模版-vue使用md5对pwd加密

安装依赖

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 了