Ant design pro-项目探究（2）拦截器_antdpro 拦截器 url 参数-CSDN博客

本文链接：https://blog.csdn.net/weixin_45229417/article/details/123241419

Ant design pro-项目探究（2）请求拦截器

用途

关于前后端分离的项目，前端可以采用axios或者ajax来作为请求方式，Ant design pro采用的是其他方式，第三篇会做介绍。

在进行前后端分离模式中，定义统一的拦截器是相对比较常见得的，目的是用来为每次请求和返回来做一些处理。

实践
以下是关于拦截器在本次毕设撰写的代码，直接添加以下代码文件生效文件路径为/src/app.jsx

请求拦截器

// request拦截器, 改变url 或 options.
request.interceptors.request.use((url, options) => {
	// 获取本地存储参数token（是在登录时已存储）
  let token = localStorage.getItem('token');
  console.log("本地缓存:" + token)
  console.log("开始请求:" + url)
  // 这是用于后端请求认证的，后端权限框架我是采用saToken
  const authHeader = { satoken: `${token}`};
  return {
    url: url,
    options: { ...options, interceptors: true, headers: authHeader },
  };
});

返回拦截器

request.interceptors.response.use( async (response) => {
  // 克隆响应对象做解析处理
  // 这里的res就是我们请求到的数据
  const res = await response.clone().json();
  // 返回根据获得code做一些提示判断
  const {code,msg} = res;
  if (code === 200) {
    // 在处理结果时判断res是否有值即可
    return res;
  }
  if (code === 301) {
    messageUtils.error("未登录或登录过期，请重新登录", 10)
    // messageUtils.error(msg)
    history.push(loginPath);
    return res;
  }
  return res;
})