Vue移动端—登录的业务流程总结

登录业务流程

判断用户是否登录
第一次登录的时候，前端调后端的登陆接口，发送用户名和密码，后端收到请求，验证用户名和密码
如果想点进我的页面，没有登录的话，会自动跳转登录页面，前端可根据后台返回的信息，在路由跳转中做判断。因为在这里使用的 axios做vue的请求模块，所以项目采用的是在请求拦截模块中根据后台返回的登录状态码进行判断，客户端输入手机号，点击验证码，进行登录，服务端对手机号，验证码进行验证，验证通过，则说明登陆成功，根据当前用户信息，生成了token，将token信息以cookie形式返回到了客户端

登录成功保存用户状态信息
验证成功，就给前端返回一个token，前端拿到token，将token存储到localStorage和vuex中
并跳转路由页面 前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面 每次调后端接口，都要在请求头中加token，我们常用axios的请求库中，添加全局拦截器，将token设置在请求头中。 后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401 如果前端拿到状态码为401，就清除token信息并跳转到登录页面