登录之执行流程

• 初识Vue-element-Admin
• 今天我们来看看中后台管理系统中 “登录” 执行了那些操作流程

1. views/login/index

• 首先在点击登录后,触发啦 “handleLogin” 事件
  
• 在封装好的组件上使用，所以要加上.native才能click
• prevent就相当于…event.preventDefault(), 阻止默认事件

2. handleLogin事件

• handleLogin 方法主要做了将登录表单信息缓存起来
  • this.$store.dispatch() 调用vuex中action 方法
• 页面表单验证通过后执行以下操作
• 1 — 执行的操作是将loginForm表单当参数, 然后调用到vuex(store)下user文件的login 方法

3. store/modules/user

• 1 — 触发方法后 —> 将传过来参数 loginForm 解构赋值 { username 和 password }
• 2 — 向后台请求登录 —> (将用户名和密码在后台进行验证)
• 3 — 接收后台验证成功响应的参数 —> 提交到mutations 调用mutations 里SET_TOKEN方法
• 4 — 执行/utils/auth下setToken方法 接着往下看

4.mutations/SET_TOKEN方法

• 后台响应的参数赋值给state下token
• token将实际将参数给 getToken()方法 —> 是/utils/auth下getToken()

5. /utils/auth

• 将数据缓存在cookies (进行 session 跟踪而储存在用户本地终端上的数据的存储库)

6.login/index

• 执行操作 跳转本页面定义的重定向 或 首页

总结

• 以上是登录执行的流程,至于登录路由权限方面的限制在 permission 文件中, 引用则在main.js 全局引用权限控制
• 有不足之处请指正,