《AngularJS深度剖析与最佳实践》一1.6 实现AOP功能

本节书摘来自华章出版社《AngularJS深度剖析与最佳实践》一书中的第1章,第1.6节,作者 雪狼 破狼 彭洪伟,更多章节内容可以访问云栖社区“华章计算机”公众号查看

1.6 实现AOP功能

至此,实现路由页面时用到的技术我们已经基本示范过了,接下来我们将开始实现一些高级功能。这些功能具有全局性的影响—基本上每个路由都会涉及它,如果我们把它嵌入到每个路由的实现里,那么代码中将出现大量的重复,编写和维护将会变成噩梦。这类功能,我们称其为“AOP功能”,也就是“面向切面功能”(形象点说:路由是竖着并列在一起的,AOP功能则像一个平台一样支撑着它们)。最典型的就是“登录”和“错误处理”。接下来,我们先来实现“登录”。

1.6.1 实现登录功能

传统的登录过程是这样的:
浏览器访问一个网址。
服务器判断这个网址是否需要登录才能访问。
如果需要,则给浏览器回复一个Redirect头。
Redirect的地址是登录页,地址中还带有一个登录成功后的回调地址。
浏览器把登录页显示给用户,用户输入有效的用户名密码之后提交到服务器。
服务器检查用户名密码是否有效,如果有效则给浏览器回复Redirect头来跳转到回调地址。
这样用户就完成了登录。
单页面应用(SPA)下固然也可以用传统方式进行登录,但是在Ajax的支持下,还有更为友好的登录方式,这也是一些大型网站中常用的方式。
实现Ajax登录的核心思想是:只需要保护后端API就够了,通常不用保护前端URL。大致的登录过程如下:
前端发起一个请求。
服务端判断这个网址是否需要登录才能访问。
如果需要,则给前端发回一个状态码401(未认证身份,即:未登录)。
前端收到401状态码,则弹出一个对话框,提示用户输入用户名和密码。
用户输入用户名和密码之后提交。
前端发起一个登录请求,并等待登录成功。
登录成功后,前端重新发送刚才被拒绝的请求。
这种方式的优点如下:
把控制逻辑完全交给前端,后端只要提供“纯业务API”就够了,这样前后端的分工非常明确。
完全在当前页面中执行,不用多次加载页面,用户操作非常顺畅。
在Promise机制的支持下,登录过程对前端的应用逻辑可以是完全透明的(调用API的代码不需要区分中间是否发生过登录,也不需要对此做任何处理)。
原理清楚了,接下来我们就来考虑代码实现。
在Angular中有一种机制叫作拦截器(interceptor),它是$http的一个扩展点,它类似于后端框架中的过滤器(filter)机制。它会对每个$http请求的发送和接收过程进行过滤,由于$http是Angular中的底层服务,所以基于它的$resource等服务也同样会受到影响。
在Angular的官方文档中给出的拦截器范例代码如下所示:

// 把拦截器注册为一个factory型服务
angular.module('com.ngnice.app').factory('myHttpInterceptor', function($q, dependency1, dependency2) {
    return {
        // 发起请求之前的拦截函数。可选。
        'request': function(config) {
            // config就是执行$http时的参数,如 {url: '...', method: 'get', ...}
            // 可以返回原config、新config、新Promise或通过返回$q.reject(rejection)来阻止发起请求
            return config;
        },
        // 请求被其他拦截器阻止时的拦截函数。可选。
        'requestError': function(rejection) {
            // 如果这个错误是可以补救的,则返回一个响应对象或新的Promise,稍后会详细讲解这种机制
            if (canRecover(rejection)) {
                return responseOrNewPromise
            }
            return $q.reject(rejection);
        },
        // 收到服务器给出的成功回应时的拦截函数。可选。
        'response': function(response) {
            // 成功时可以直接返回响应对象,也可以返回一个新的Promise。
            return response;
        },
        // 收到服务器给出的失败回应时的拦截函数。可选。
        'responseError': function(rejection) {
            // 如果这个错误是可以补救的,则返回一个响应对象或新的Promise。
            if (canRecover(rejection)) {
                return responseOrNewPromise
            }
            return $q.reject(rejection);
        }
    };
});
// 把这个服务追加到$httpProvider.interceptors中,以便$http给它们进行拦截的机会。
$httpProvider.interceptors.push('myHttpInterceptor');
// 也可以不定义服务,直接把一个函数push进去。建议不要用这种写法,灵活性差,而且容易干扰前端工具链的依赖注入处理。
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
    return {
        'request': function(config) {
            // same as above
        },
        'response': function(response) {
            // same as above
        }
    };
});

这段代码其实很简单:先声明一个对象,这个对象有四个拦截函数,它们分别在四个不同的情况下被调用,让你有机会进行处理,然后把这个对象注册进$http中即可。
这段代码的难点在于这里有两个很重要的新概念:Provider和Promise。
我们先不用深究Provider的实现原理,第2章“概念介绍”中会讲到,这里我们只需要了解它的用途是对特定的服务进行配置,比如:$httpProvider就是对$http服务进行配置的,$locationProvider服务就是对$location服务进行配置的。这里的interceptors就是$http的一种配置项。
Promise则要难一些,简单地说,Promise就是一个承诺,比如,我们调用$http时的代码:

$http.get('/api/readers').then(function(data) {
    ...
});

这里的$http.get函数返回的对象就是一个Promise(承诺)表示“我现在先给你一个承诺,我现在不能给你答案,但是一旦条件具备了我就会履行这个承诺”。这个Promise有一个成员函数叫then。我们可以把一个回调函数传给then函数,它会把这个回调函数保存在Promise对象中。当$http.get获得了从后端返回的数据时,我们传进去的这个回调函数就会被执行,并且把来自服务器的响应对象传给我们的回调函数。
Promise在Angular中是个非常重要而且非常有用的概念,在实际项目中会大量用到。如果仍然没有理解,可以翻到第2章“概念介绍”中通过生活中的一个例子了解其基本概念再往下读。
接下来,我们回到主题,看看拦截器的工作原理。
由于Angular中$http和interceptors部分的代码涉及Promise的高级用法,读起来有点绕。这里用最直观的伪代码来表明其工作原理:

// 演示两个interceptor时的工作原理
var interceptors = [interceptor1, interceptor2];
var $http = function(config) {
    // request阶段,先注册的先执行
    var requestPromise1 = interceptor1.request(config);
    // 第一个interceptor.request的结果作为第二个interceptor.request的参数,以此类推
    requestPromise1.then(function(config1) {
        var requestPromise2 = interceptor2.request(config1);
        requestPromise2.then(function(config2) {
            // 最后一个interceptor.request的结果将被实际发送出去
            sendAjaxRequest(config2, function successHandler(response) {
                // response阶段,后注册的先执行
                var responsePromise2 = interceptor2.response(response);
                responsePromise2.then(function(response2) {
                    var responsePromise1 = interceptor1.response(response2);
                    responsePromise1.then(function(response1) {
                        // 此处触发$http(config).then的第一个回调函数,并且把response1传过去
                    });
                });
            }, function errorHandler(rejection) {
                // responseError阶段,后注册的先执行
                var responseErrorPromise2 = interceptor2.responseError(rejection);
                responseErrorPromise2.then(function(rejection2) {
                    var responseErrorPromise1 = interceptor1.responseError(rejection2);
                    responseErrorPromise1.then(function(rejection1) {
                        // 此处触发$http(config).then的第二个回调函数,并且把rejection1传过去
                    });
                });
            });
        });
    });
}

相比Angular中的代码,这段代码臃肿不堪,而且只能支持两个拦截器,这是因为没有充分发挥Promise的威力。读者可以自己尝试用Promise来实现支持无限个拦截器,然后在Angular源码中搜索var chain = [serverRequest, undefined];,并与其对照,来学习Promise的高级用法。
我们要实现登录对话框,那么该怎么写拦截器呢?
请看代码:

angular.module('com.ngnice.app').factory('AuthHandler', function AuthHandlerFactory($q) {
    return {
        responseError: function(rejection) {
            // 如果服务器返回了401 unauthorized,那么就表示需要登录
            if (rejection.status === 401) {
                // “未登录”是一个可补救的错误,但我们先不补救,直接弹出一个对话框
                alert('需要登录');
                return $q.reject(rejection);
            } else {
                // 其他错误不用管,留给其他interceptor去处理
                return $q.reject(rejection);
            }
        }
    };
});

这是一个最简单的登录处理器,它不会弹出登录对话框,让用户登录,来试图“补救”这个错误,而是直接弹出一个对话框,然后继续原有逻辑。
接下来,就是重头戏了,我们要“补救”它!弹出一个输入框,提示用户输入密码,然后我们把固定的用户名(xuelang)和用户输入的密码发给服务器。

angular.module('com.ngnice.app').factory('AuthHandler', function AuthHandlerFactory ($q, $injector) {
    return {
        responseError: function (rejection) {
            // 如果服务器返回了401 unauthorized,那么就表示需要登录
            if (rejection.status === 401) {
                var password = prompt('请输入密码:');
                if (password) {
                    var Login = $injector.get('Login');
                    var $http = $injector.get('$http');
                    // 尝试登录
                    return Login.save({
                        username: 'xuelang',
                        password: password
                    }).$promise.then(function () {
                        // 登录成功了,就补救:重新发送刚才的请求,返回一个新的Promise,当这个Promise完成时,原有的then回调函数会被执行
                        return $http(rejection.config);
                    });
                } else {
                    return $q.reject(rejection);
                }
            } else {
                // 其他的错误,留给其他的拦截器来处理
                return $q.reject(rejection);
            }
        }
    };
});

当实现了这段代码之后,整个执行过程是这样的:
前端调用需要登录的api:$http.get('/api/readers').then(ajaxCallback);。
服务器返回401(未认证)。
触发AuthHandler的responseError函数。
弹出prompt对话框,要求输入密码。
发送登录请求,传入用户名和密码。
登录完成后,重新发送刚才的$http.get('/api/readers')请求,包含所有参数。
把这个请求作为新的Promise,当它完成时,会触发刚才注册的ajaxCallback函数。
对于/api/readers的调用者来说,登录过程是完全“透明”的,它不用对登录过程做任何特殊处理—不用管401,不用管重发。它的控制逻辑和不需要登录的API是完全一样的。
这种编程风格称为AOP—面向切面编程(Aspect-Oriented Programming)。它的优点是“透明性”,专业的说法是“无侵入性”,也就是实现具体业务的代码不需要做任何改写。非常适合实现登录、错误处理、日志等与具体业务无关的通用类功能。
这样一来,开发具体业务逻辑的程序员就不需要关注这些了,而是由一两个程序员来专注处理这些通用功能。分工更加专业,沟通需求和耦合程度更低,开发组织的结构更加优化。

1.6.2 实现对话框

我们刚才通过系统的Prompt API实现了登录功能,但显然,它还不能用于产品级别:不能填写用户名、密码是明文、UI无法定制。
我们需要一个可以完全由自己控制的登录对话框。不过,我们不用自己实现它—第三方组件库angular-bootstrap中就有一个。我们直接借用它就行了。
实现代码如下。

(1)JavaScript
// 使用独立controller,以便编写单元测试和复用
angular.module('com.ngnice.app').controller('UiPromptCtrl', function UiPromptCtrl($scope) {
    var vm = this;
    vm.submit = function () {
        // 有输入时才关闭
        if (vm.result) {
            $scope.$close(vm.result);
        }
    };
});
angular.module('com.ngnice.app').service('ui', function Ui($modal, $rootScope) {
    this.prompt = function (message, defaultValue, title, secret) {
        // 想把参数传到界面中,就要通过一个scope传进去,我们这里通过给$new()传一个true参数,来创建一个独立作用域
        var scope = $rootScope.$new(true);
        scope.title = title;
        scope.message = message;
        scope.secret = secret;
        // 打开对话框
        var modal = $modal.open({
            templateUrl: 'services/ui/prompt.html',
            controller: 'UiPromptCtrl as vm',
            // 指定对话框大小
            size: 'sm',
            scope: scope
        });
        // 返回一个监听对话框是否被关闭或取消的Promise
        return modal.result;
    };
    this.promptPassword = function (message, defaultValue, title) {
        return this.prompt(message, defaultValue, title, true);
    };
});
(2)模板



使用代码如下:

ui.promptPassword('这是一个测试' /*提示信息*/, 'abc'/*默认值*/, '提问'/*标题*/).then(function(value) {
    console.log(value);
});

angular-bootstrap的$modal函数已经封装了大部分逻辑,我们只是在它的基础上来定制一些特定用途的对话框,提高表意性,并去除冗余代码。
$modal的接口文档可以参见其官方文档,这虽然是英文的,不过都很浅显,而且还有范例。
这里面需要注意的有几点。
控制器不要内联在$modal调用中,如$modal.open({...,controller: function() {});的形式是不提倡的,这将带来两大缺点:
这种控制器无法在外部引用到,因此难以被单元测试或被复用。
部分minify工具无法识别它,导致控制器中注入的变量被重命名而注入失败。
modal.open的结果是一个对象,包括四个成员:
opened:一个Promise,当对话框成功打开时触发then函数。
result:一个Promise,当对话框打开后再被关闭时触发then函数,这通常表示用户点击了“确定”等按钮。
close:一个函数,用于通过程序关闭对话框,触发then函数。
dismiss:一个函数,用于通过程序关闭对话框,触发catch函数或then的第二个回调函数。
vm的使用,这里是为了避免原型链继承问题,这个问题比较复杂,请参见第4章“最佳实践”中的4.9节“使用controller as vm方式”。
像prompt这类函数,通常只要关心最终结果就行了,所以没必要响应opened事件。所以这里做了一个简单的封装,使其直接返回result这个Promise。

1.6.3 实现错误处理功能

用户的任何操作都可能产生错误,如果把错误处理代码分散的到处都是,代码就会显得很“脏”。怎么解决这个问题呢?本节中我们就来分析并给出解决方案。
错误分成两大类:一种是用户操作违反了业务规则导致的错误,我们称之为用户错误,例如我们要求密码至少有六位长,而用户输入了3位就提交了;另一种是我们自己程序本身的缺陷导致的错误,我们称之为系统错误,比如数据库连接中断。用户错误是意料之中的,我们知道用户可能出错,而系统错误是意料之外的,我们可能在设计之初就没有想到它会中断,或者认为它是小概率事件而暂时未加防范。
对用户错误的处理,我们已经在1.4.5节“添加验证器”等节中示范过,不再讲解,本节我们主要处理系统错误。
处理系统错误的原理和实现登录功能一样,都是基于Interceptor机制,区别在于登录功能处理的是401错误,而本节处理的是所有其他错误(4xx、5xx等)。代码如下:

angular.module('com.ngnice.app').factory('myHttpInterceptor', function($q, dependency1, dependency2) {
    return {
        // 收到服务器给出的失败回应时的拦截函数。可选。
       'responseError': function(rejection) {
            // 0表示用户取消了Ajax请求,这通常出现在用户刷新当前页面的时候,不用管它
            if (rejection.status === 0) {
                return $q.reject(rejection);
            }
            // 401表示用户需要登录,我们在另一个interceptor中处理了它,这里忽略
            if (rejection.status === 401) {
                return $q.reject(rejection);
            }
            // 显示信息
            alert(rejection.data);
            return $q.reject(rejection);
        }
    };
});

这里不管三七二十一,把服务端返回的错误信息直接弹对话框显示出来。为了对用户更加友好,我们需要对status进行区分,翻译成更加友好的提示信息。另外,需要进一步改造对话框的外观,这里不再展开,读者可以参照前面的prompt函数来自己实现。

你可能感兴趣的:(前端,后端,ui,ViewUI)