代码模版-使用vue-cookies

安装依赖

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 数据（即被加密后到数据）