1、权限拦截原理:
说明:常用的是 onload,onunload 事件和 Mutation Events 事件。 onload 和 onunload 事件可以作用在 window,frame,img 和 object 等对象上,利用 onload 可以在对象载入前执行一些操作 ,onunload 事件可以跟踪浏览器关闭前执行操作
方式:利用 Onload 事件的拦截,我们基本上解决了静态 HTML 内容的拦截,而对于脚本操作的 HTML 变化,我们就可以通过 Mutation Event 来进行解决。通过 DOMAttrModified、DOMNodeInserted事件可以很好地跟踪和拦截 HTML 的变化;
例子:
功能:跟踪 src、action、href 等属性的变化
document.addEventListener(“DOMAttrModified”, AttributeNodeModified, false);
function AttributeNodeModified(evt)
{
if(evt.attrName == “href”) { }
if(evt.attrName == “src”) { }
if(evt.attrName == “action”) { }
}
2.利用JavaScript 平台上的 AOP 方案主要有 Ajaxpectiii、jQuery AOPiv等。这些代码库主要功能是给指定对象的指定方法添加 Before, After,Around 等,从而达到拦截对象方法调用的目的;
并且支持正则搜索方法名称。
例子:
var thing = {
makeGreeting: function(text) {
return 'Hello ' + text + '!';
}
}
function aopizeAdvice(args) {
args[0] = 'AOP ' + args[0];return args;
}
function shoutAdvice(result) {
return result.toUpperCase();
}
Ajaxpect.addBefore(thing, 'makeGreeting', aopizeAdvice);
Ajaxpect.addAfter(thing, /make*/, shoutAdvice);
service.interceptors.response.use(
response => {
const code = response.status
if (code < 200 || code > 300) {
Notification.error({
title: response.message
})
return Promise.reject('error')
} else {
return response.data
}
}),
状态码(拦截时判断code的状态):
200-299:数据请求成功后返回;
300-399:请求URL目标重定向;
400:客户端错误(接口URL错误,传递的参数错误)
500:服务端错误(网络异常,数据库异常、服务重启等)