登录接口涉及到的页面:
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中