AngularJs拦截器的一些应用

为请求添加accessToken
除了登录和注册页面, 其他任何的访问都需要加上accessToken参数, 以表明用户的身份.

angular.module('app')
    .factory('accessTokenInterceptor', function ($injector) {
        return {
            request: function (config) {

                var authService = $injector.get('authService');
                var url = config.url;

                if (!/\s*.html$/.test(url) && url.indexOf('/sign-in') == -1 && url.indexOf('/sign-up') == -1) {
                    config.params = angular.extend({}, config.params, {
                        accessToken: authService.getToken()
                    });
                }

                return config;
            }
        }
    });

loading动画的显示与隐藏
当请求发起时, 给用户一个loading动画的反馈
angular-loading-bar

身份认证
服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）.

• 200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）.
• 201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功.
• 202 Accepted - [*]：表示一个请求已经进入后台排队（异步任务）
• 204 NO CONTENT - [DELETE]：用户删除数据成功.
• 400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的.
• 401 Unauthorized - [*]：表示用户没有权限（令牌、用户名、密码错误）.
• 403 Forbidden - [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的.
• 404 NOT FOUND - [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的.
• 406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）.
• 410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的.
• 422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误.
• 500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功. 状态码的完全列表

angular.module('app')
    .factory('authInterceptor', function($q, AUTH_EVENTS) {

            return {
                responseError: function(error) {

                    var statusCodeMap = {
                        401: AUTH_EVENTS.notAuthenticated,
                        403: AUTH_EVENTS.notAuthorized
                    };
                    var authEvent = statusCodeMap[response.status];

                    if (authEvent) {
                        $rootScope.$broadcast(authEvent, response);
                    }

                    return $q.reject(response);
                }
            }
        }
    });

获取请求响应时间
让我们用拦截器来测一下从后台返回响应需要多少时间. 可以通过给每个请求和响应加上时间戳

angular.module('app')
    .factory('timestampMarkerInterceptor', function() {
        return {
            request: function(config) {
                config.requestTimestamp = new Date().getTime();
                return config;
            },
            response: function(response) {
                var config = response.config;

                config.responseTimestamp = new Date().getTime();
                var time = config.responseTimestamp - config.requestTimestamp;

                console.log('The request: ' + config.url + ' took ' + (time / 1000) + ' seconds.');
                return response;
            }
        };
    });