登录流程(vuex)

流程

登录

• 前端通过表单获取账号、密码
• 携带账号、密码向后端登录接口发请求

curl -X POST \
-H "Content-Type: application/json" \
-H "X-LC-Id: 自己的ID" \
-H "X-LC-Key: 自己的Key" \
-d '{"username":"tom","password":"f32@ds*@&dsa"}' \
https://API_BASE_URL/1.1/login

• 登录成功后，后端下发用户信息（id、账号、token、头像）
• 前端存储用户信息
  • 存入状态机【跨组件实时同步】
    • 新建 store/user.js
    • Login.vue 中触发改变用户信息 userStore
    • vuex 里面的数据都是临时存储，刷新后会丢失
  • 存入本地存储 localStorage
  • 跳转主面板 router.push('/')
• 路由拦截中的登录判断，也使用状态机中的用户信息来判断
• 在 main.js 中，尝试提取本地存储的用户信息，设置给状态机 【避免刷新后丢失登录状态】

退出登录

 handleLogout() {
  this.$store.commit('user/initInfoMut',null)  //重置状态机
  localStorage.removeItem('userInfo')  //清除本地存储
  this.$router.push('/login') //跳转到登录界面
}