登录

登录时 element-ui 表单校验

<!--
  el-form 组件
    :model属性 ———— 绑定的数据是json格式时，校验方法功能才完全可用
    :rules属性 ———— 绑定校验规则
  el-form-item 组件
    prop属性 ———— 设置为需要校验的字段名，prop绑定的值必须可以通过 . 的方式从el-form上的model绑定的对象中找到。
-->

记住账号和密码的逻辑

/**
 * isRemember
 *    浏览器 cookie 中是否保存 username 和 password
 *    方便下次登录时直接从 cookie 中获取并填充 username 和 password ，不用手动输入
 */
isRemember: false

// 如果是 记住账号和密码 , 将 username , password 存到 cookie 并设置过期时间
export function setUsernamePassword(loginParam) {
  Cookies.remove('username')
  Cookies.remove('password')
  Cookies.remove('isRemember')
  if (loginParam.isRemember) {
    const setExpires = { expires: Config.cookieRememberExpireTime }
    Cookies.set('username', loginParam.username, setExpires)
    Cookies.set('password', encrypt(loginParam.password), setExpires) // 把密码加密后保存到 cookie
    Cookies.set('isRemember', loginParam.isRemember, setExpires)
  }
}

// 从 cookie 中获取 username 和 password
export const getUsernamePassword = {
  username: Cookies.get('username'),
  password: Cookies.get('password') === undefined ? undefined : decrypt(Cookies.get('password')), // 获取 cookie 里加密的密码并解密
  isRemember: Cookies.get('isRemember') === undefined ? undefined : Boolean(Cookies.get('isRemember'))
}

/**
 * isRemember 为 true 表示 ———— 用户点击记住账号和密码 ———— 这是 username ,password 保存到了 cookie 中,并设置了过期时间
 * 只要过期时间没到 ———— 就算退出浏览器, cookie 中的 username ,password 的依然有效 , 下次从 cookie 可以获取到
 *
 * 用户想要记住账号和密码的目的
 *  (1) 省去手动输入 账号和密码
 *  (2) 下次直接打开浏览器, 能直接访问到首页, 而不是重定向到登录页 ——— 所以也需要把 token 存到 cookie 并设置过期时间（设置了过期时间 —— 重新打开浏览器也可以从 cookie 拿到 token）
 */

 

登陆成功，处理响应数据

  1.后端响应的 token 保存到浏览器 cookie 中

  2.后端响应的 token 保存到 vuex 的 storage 的 state 中

 3.把后端响应的 当前登陆的用户信息 保存到 vuex 的 storage 的 state 中

4

a

 

 

 

 

a