文章目录
安装依赖
cnpm install vue-cookies --save
使用 cookies 保存用户数据
我们在登录页的应用组件中有这样的 js 脚本
import reactive from "vue"
import VueCookies from "vue-cookies"
// 一些初始化的脚本
const formData = reactive({
})
// init 初始化判定如果有 cookies，就从 cookies 中拿登录信息数据赋值到 formData 结构体中，这个 formData 结构体中的变量通过 v-model 绑定了表单中各个 input
const init = () => {
const loginInfo = VueCookies.get("loginInfo")
if (!loginInfo) {
// 如果不存在就退出
return
}
Object.assign(formData, loginInfo)
}
init()
// 一些函数定义
// 登录函数
// 登录的入参数，可能要经过加密处理
// result := 登录之后的响应，响应结果包括 {code:"", msg: "", data: {}}
// 登录结束之后，需要存储 cookies
// 保存登录的响应的用户信息，永不过期
VueCookies.set("userInfo", result.data, 0)
// 保存登录信息数据，期限 7 天
const loginInfo = {
account: formData.account,
password: formData.password,
}
VueCookies.set("loginInfo", loginInfo, "7d")
值得注意的是，登录之后，把 formData 中数据保存到 cookies 中并设置期限，保存进 cookies 中的 pwd 数据应该最好是加密后的
可以看到上面代码没有对 formData 进行加密后存储 cookies，好的想法是保证 formData 数据（即 v-model 绑定到 input 数据始终是加密后的数据）
所以一旦之前已经登录有这个 loginInfo 的 cookies 数据的话，formData 会从 cookies 中拿数据，这时候拿到的 formData 的 pwd 数据可是加密后的（要知道手输 input 的 pwd 可是未加密的数据），所以一般在登录 request 之前先要判定下，formData 中的数据和 cookies 中不一致的话就要给 formData 加密，来确保 formData 一定加密后的数据，一致的话那肯定就是 cookies 中的 pwd 数据（即被加密后到数据）