引入axios
引入localstroge (utils中的工具类)
添加请求拦截器
主要处理请求头(发送给后端),例如token,(在每次请求前都要携带token),还有其他自定义的请求头
添加响应拦截器
处理响应数据
添加错误请求函数
根据返回的状态码判断各种状态,比如403,状态失效,清空localstroge,其他状态码动态显示返回的msg信息,最终重定向login页面 ...等等操作
添加成功请求函数
也是根据状态码判断,比如code==40000 表示未登录,跳转到/login ...等等操作
最终定义函数,返回promise,export 这个函数名
函数参数:就是调用接口时传递的data+定义接口时的默认参数
函数内容:
定义公共参数
定义请求参数(axios的配置,method,baseURL,url,responseType,timeout等)
定义meta,将meta(请求接口时传data,meta),meta是对象,直接赋值给headers,此时相当于给headers初始化。
最后:
const promise = new Promise((resolve, reject) => {
axios(httpDefaultOpts).then(response => {
handleSuccess(response, resolve, opts)
}).catch(error => {
handleError(error, reject, opts)
})
})
return promise
登录页面点击登录按钮后
1 首先校验表单规则,校验成功后,请求接口
2 接口传入表单数据,meta等字段
3 请求成功后,拿到成功的数据,将token expiretime等存入store中
4 store中的mutation将val值存入localstorage中,将用户信息也存入store中,且存入localstorage中