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 Web端登录逻辑整理

 

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中      
上一篇:IDEA建Web项目使用Tomcat时,出现HTTP Status 404 情况的一种解决方法(自我留档)


下一篇:如何避免Web应用程序安全测试中的API盲区?