本文介绍了如何封装axios以实现错误状态码处理，包括401、403、404等错误的处理策略。同时，文章讨论了API接口的统一管理，通过创建api文件夹和模块化的接口文件，简化组件中的接口调用。此外，还提到了在组件中按需导入API的使用方式，以及将API挂载到vue.prototype上的方法，以便于在应用中便捷调用。最后，文章提及了断网情况的处理，展示了在网络中断时的处理逻辑。
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: ‘/login’,
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: ‘登录过期，请重新登录’,
duration: 1000,
forbidClick: true
});
/ 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 / 清除token
store.dispatch(‘FedLogOut’).then(() => {
// 跳转登录页面，并将要浏览的页面fullP
最低0.47元/天 解锁文章
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
