在软件业，AOP为Aspect Oriented Programming的缩写，意为：面向切面编程，通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续，是软件开发中的一个热点，也是Spring框架中的一个重要内容，是函数式编程的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可重用性，同时提高了开发的效率。
事实上在js中，我们不止一次地会用到AOP，这不，我们又遇到了：
现在有一个需求是这样的：在我们的某个SPA项目中需要模拟Native侧的登录效果以增强用户体验， 大概思路是，不管哪个View拉取了哪个接口的数据，只要接口返回403，那么就要”快速”跳转到登录页。 开发人员在调用$http方法拉取数据时不需要关心这个逻辑，全程由拦截逻辑透明代理。
思路分析
经过分析可以得出：
-
所有涉及拉取数据的视图必先要经过一次主动的fetchData调用，因此，我们需要拦截调用侧的逻辑， 并且最好能够保证这个拦截逻辑对于调用侧来讲是透明的；
-
为了增强用户体验，我们需要在视图还没进入渲染之前就完成这个跳转，因此，这个跳转逻辑不能推迟。
以上内容是文章摘要
实现
我们项目落地的选型是：vue+es6，想要达到的目的是让开发不关心拦截逻辑， 像这样：
1 import header from '../components/header.vue';
2 import hotsale from '../components/hotsale.vue';
3 import banner from '../components/banner.vue';
4
5 export default {
6 // 路由勾子
7 // 增强体验的推荐做法
8 route: {
9 data() {
10 return {
11 // 因为AOP实现的$httpWithAuth方法有性能损耗
12 // 有一些职责清晰的业务可能还是需要直接调用$http
13 // 所以，通过将$httpWithAuth这个全新方法挂载到上下文来解决
14 'testData': this.$httpWithAuth
15 .get('http://api.test.com/test')
16 .then(function(res) {
17 return {
18 'testData': res
19 }
20 })
21 }
22 }
23 },
24 ready() {
25 console.dir(this.$http);
26 console.dir(this.$route);
27 },
28 data() {
29 return {
30 'testData': {}
31 }
32 },
33 methods: {
34
35 },
36 components: {
37 // 注册组件实例
38 header,
39 hotsale,
40 banner
41 }
42 };$httpWithAuth的实现
1 function install(Vue) {
2 var _ = require('./util')(Vue);
3
4 // $httpWithAuth
5 // 代理Vue.$http
6 // Vue.$resource是$http的上层
7 Object.defineProperties(Vue.prototype, {
8 $httpWithAuth: {
9 get: function() {
10 return _handleWrapper(this, this.$http);
11 }
12 }
13 });
14
15 // 代理$http模块
16 function _handleWrapper(vm, originModule) {
17 // 验证方法
18 function _auth(promise) {
19 promise.then(function(rs) {
20 // 返回promise
21 // 这里需要返回Promise给组件实例的route选项用
22 return promise;
23 }, function(err){
24 // 重定向到某个业务path
25 // 一般为/login登陆业务
26 vm.$route.router.go('/login');
27 });
28 }
29
30 for(var method in originModule) {
31 if(originModule.hasOwnProperty(method) &&
32 _.isFunction(originModule[method])
33 ) {
34 // 模块原方法
35 var _oF = originModule[method];
36 originModule[method] = function() {
37 // 绑定验证
38 return _auth(_oF.apply(this, arguments));
39 }.bind(originModule);
40 }
41 }
42
43 return originModule;
44 }
45
46 }
47
48 if (window.Vue) {
49 Vue.use(install);
50 }
51
52 module.exports = install;- 通过Vue.use勾子我们将$httpWithAuth挂载到上下文供业务侧使用，这样可以保证在各个地方都可以按需调用这个模块
- 通过简单的AOP，我们就把$http模块的方法进行了验证代理，这样就基本完成了我们的需求。
