文章目录
安装依赖
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 数据(即被加密后到数据)