1.(静态)首先我们要做静态和表单验证
2.(密码加密)在输入完手机号和密码后,我们要对密码进行加密,加密的话使用插件md5对密码加密,之后将请求发送到后台
3.(封装登录)因为我们在项目里的请求是按模块来进行划分的,所以我们会通过axios方法把登录的方法封装在vuex的user.js模块中
4.(创建axios实例)通过axios的create方法创建axios实例,里面有2个属性,baseURL和timeout
BaseURL是个变量,是我们发送请求的根路径,通过node.process取值,
npm run dev加载.env.development文件
npm run build会加载.env.production文件
5.(保存token)在登录之后,我们拿到相应数据,我们将从后端返回的token通过mutation保存到vuex,并使用插件js-cookie将token保存至cookie
6.(解决跨域)如果遇到跨域问题,在vue.config.js中通过proxy devServer中配置反向代理
7.(添加请求头)最后在axios拦截器中
我们将token注入到config.headers.common[‘Authorization’]=’Bearer ${token}’
将token保存在请求头,方便后续操作
登录的优化
首先登录做了一个防抖机制
其次是把登录信息保存在cookie
还有保存到redis数据库的一个优化
简单说一下redis数据库的优点
redis跟本地存储一样可以持久化保存数据
redis可以给数据加验证，可以添加过期时间
支持多种数据格式
