从零开始，手打一个权限管理系统（第七章前端拦截器）-创新互联

文章目录

• 前言
• 一、请求拦截器
• 二、响应拦截器
• 三、登录修改
• 四、完善其他接口
• 五、 [体验地址](http://test.ailot.vip/)

站在用户的角度思考问题，与客户深入沟通，找到延长网站设计与延长网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站建设、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网站空间、企业邮箱。业务覆盖延长地区。

---

前言

第六章中我们留下了一个问题，就是登录成功后没有跳转；其实了，就是拦截器上面的问题，今天我们就来解决这个问题！！！

仔细阅读过官方文档的朋友一定会发现在接口和模拟数据这一节介绍了拦截器，现在我们要做的就是将官方的代码修改一下，改成能够适配我们后端的代码。

---

一、请求拦截器

后端代码是通过heades里面Authorization来存放token值的，所有我们需要再请求头里面加上这个字段，代码很简单：

---

二、响应拦截器

响应拦截器解析的内容需要适配后端的模型，官方的代码是部分适配的，我们还需要自己修改一下；

axios.interceptors.response.use(
  (response: AxiosResponse) =>{const res = response.data;
    // 0成功，1失败
    // 全局统一拦截展示失败原因,不用每个请求单独写
    if (res.code !== 1) {  Message.error({content: res.msg || '不明原因的错误',
        duration: 5 * 1000,
      });
      return Promise.reject(new Error(res.msg || 'Error'));
    }
    return res.data;
  },
  (error) =>{Message.error({  content: error.msg || 'Request Error',
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);

这样就可以按照我们自己的流程来处理了，有其他流程的可以自行添加！

---

三、登录修改

前面我们修改了响应拦截，最终返回的对象是data，所以在我们接口中也要进行修改，因为官方默认返回的是response，data在response的下一层。
对象模型：

response:{
	data:any,
	code:number,
	msg:string
}

所以在用到登录接口的地方需要进行修改

编译重新运行代码，点击登录：

出现这些错误我们暂时忽略，注释掉相关的接口代码。

重新登录，发现可以正常跳转！

---

四、完善其他接口

这个就很简单了，只需要替换成我们自己的url地址，然后将字段模型一一对应上就可以了，这里我就不再详细介绍了，空了读代码就可以了解！

当前版本tag：1.0.6
代码仓库

---

五、 体验地址

后台数据库只给了部分权限，报错属于正常！
想学的老铁给点点关注吧！！！

我是阿咕噜，一个从互联网慢慢上岸的程序员，如果喜欢我的文章，记得帮忙点个赞哟，谢谢！

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

分享标题：从零开始，手打一个权限管理系统（第七章前端拦截器）-创新互联
标题来源：http://cdkjz.cn/article/gjooe.html