Web端登录逻辑整理

登录接口涉及到的页面：

1、views/llogin/ogin.vue（组件）

2、api/login.js（接口）

登录、获取用户菜单、登出、获取验证码

3、store/modules/user.js

4、utils/auth.js

5、utils/userMgr.js

6、utils/request.js

views/llogin/ogin.vue

账号、密码、图形验证码登录（账号/手机号/身份证号）

手机号、短信验证码登录

1）获取验证码接口：verifyCode

 

2）账号登录/手机号提交表单：

表单校验成功（实例的validate）后，调用store中的Login方法

调用成功之后，把用户名（手机号）、登录类型存在本地缓存中

 store/modules/user.js

actions中的Login：

action函数可以接收一个与store实例具有相同方法的属性context，这个属性中包括下面几部分：

context:{undefined
state, 等同于store.$state，若在模块中则为局部状态
rootState, 等同于store.$state,只存在模块中
commit, 等同于store.$commit
dispatch, 等同于store.$dispatch
getters 等同于store.$getters
}
常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的 位置写自己想要的属性，如：{commit}。

在Login方法中，利用commit方法调用mutations中定义的方法来修改state中的数据（token、usercode、password、用户名全称、性别、手机号、身份证信息、用户状态、用户组织等）

在调用userMgr.js中的loginIn方法

utils/auth.js

localStorage中对用户信息的存储、读取、删除操作

utils/userMgr.js

loginIn：方法中

使用Vue.set（）追加响应式属性

把最后一次的登录人信息存储到sessionStorage中

定义一个users数组，存储到localStorage中，如果users为空，重置users，然后把当前登录用户的信息追加进去

如果users不为空，把users中的所有用户的登录状态改为非登录状态，在users数组中查找是否包含当前登录人员信息，有的话重置，没有的话追加到users数组中，

最后把users数组存储到localStorage中