某种情况下，我们需要通过自定义请求拦截器来做自己的逻辑处理，平台内置了一些拦截器
登录拦截器LoginRedirectInterceptor
请求成功拦截器RequestSuccessInterceptor
请求失败拦截器 RequestErrorInterceptor
网络请求异常拦截器 NetworkErrorInterceptor
当我们需要重写某个拦截器的时候，只需要继承对应的拦截器，然后重写里面的方法即可
// 自定义登录拦截器
export class CustomLoginRedirectInterceptor extends LoginRedirectInterceptor{
public error(response: IResponseErrorResult) {
// 自己的逻辑处理
return true // 必写
}
}
// 自定义请求成功拦截器
export class CustomRequestSuccessInterceptor extends RequestSuccessInterceptor{
public error(response: IResponseErrorResult) {
// 自己的逻辑处理
return true // 必写
}
}
// 自定义请求失败拦截器
export class CustomRequestErrorInterceptor extends RequestErrorInterceptor{
public error(response: IResponseErrorResult) {
const { errors } = response;
if (errors && errors.length) {
const notPermissionCodes = [
SystemErrorCode.NO_PERMISSION_ON_MODULE,
SystemErrorCode.NO_PERMISSION_ON_VIEW,
SystemErrorCode.NO_PERMISSION_ON_MODULE_ENTRY,
SystemErrorCode.NO_PERMISSION_ON_HOMEPAGE
];
/**
* 用来处理重复的错误提示
*/
const executedMessages: string[] = [];
for (const errorItem of errors) {
const errorCode = errorItem.extensions?.errorCode;
if (!notPermissionCodes.includes(errorCode as any)) {
const errorMessage = errorItem.extensions?.messages?.[0]?.message || errorItem.message;
if (!executedMessages.includes(errorMessage)) {
// 自己的逻辑处理
}
executedMessages.push(errorMessage);
}
}
}
return true;
}
}
// 自定义网络请求异常拦截器
export class CustomNetworkErrorInterceptor extends NetworkErrorInterceptor{
public error(response: IResponseErrorResult) {
const { networkError } = response;
if (networkError) {
const { name, message } = networkError;
if (name && message) {
// 自己的逻辑处理
}
return false;
}
return true;
}
}当拦截器的代码写完后，需要在启动工程里面的main.ts导入它
// main.ts
import MyInterceptor from './MyInterceptor.ts'
// 使用拦截器
VueOioProvider({
...
http: {
url: '',
interceptor: {
requestError: new MyInterceptor() // 这里的key是requestError，是因为我自定义的是错误拦截器，大家根据自己自定的拦截器选择对应的key
}
}
})Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/80.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
