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;
})