AngularJS - 如何对所有jsons请求进行deflate和编码/解码到base64?

时间:2012-12-30 12:14:22

标签: json http base64 angularjs deflate

假设我的角度应用程序周围有几个$资源和一些$ http:

myApp.factory('Note', function($resource) {

  return $resource('http://', {id: '@id'}, 
    { 'index': { method: 'GET', isArray: true },
      'update': { method: 'PUT'},
    });
  });

带控制器

myApp.controller('NotesController',function NotesController($scope, Note, AuthenticationService) {

$scope.notes = Note.index({}, function(data){
    console.log('success, got data: ', data);
    $scope.response = "yoy!"
  }, function(err){
    console.log('error, got data: ', err);
    $scope.response = "yay!"
  }); 
});

并且某些请求由$ http直接发送,如身份验证

var request = $http.post('http://', {email: email, password: password});

在发出实际请求/接收响应之前,我可以在何处以及如何判断角度以放大并编码/解码JSON为base64?

我认为我将外部库包装为deflate并编码/解码到工厂。然后这个工厂将被注入? 喜欢$ httpBackend?

3 个答案:

答案 0 :(得分:6)

您应该查看$http服务的请求/响应转换器http://docs.angularjs.org/api/ng.$http

请求/响应转换器只是在将内容发送/传回给调用者之前可以调用的函数。您可以全局(针对所有请求/响应)以及每个请求基础指定转换函数:

  

要在本地覆盖这些转换,请指定转换函数   作为配置的transformRequest和/或transformResponse属性   宾语。要全局覆盖默认转换,请覆盖   $ httpProvider.defaults.transformRequest和   $ httpProvider.defaults.transformResponse的属性   $ httpProvider。

要定义全局请求/响应转换器,可以按照这些行编写代码(它更像伪代码,不适用于所有浏览器,请参阅下面有关Base64的说明):

angular.module('sample', [], function($httpProvider) {

    $httpProvider.defaults.transformRequest = function(data, headersGetter) {
        return btoa(JSON.stringify(data));
    };

    $httpProvider.defaults.transformResponse = function(data, headersGetter) {
        return JSON.parse(atob(data));
    };

})

当然,您的转换代码可能更复杂,并且取决于请求/响应标头,但总体思路就在这里。 jsFiddle代码(检查控制台以查看请求被转换,您需要使用Mozilla或WebKit浏览器):http://jsfiddle.net/Ydt5j/

对于从/到Base64的实际转换,请检查此问题:How can you encode a string to Base64 in JavaScript?

答案 1 :(得分:2)

angular.module('services.base64',[]);
angular.module('services.base64').provider('base64', function () {

  this.encode = function(str) {
    return base64_encode(str);
  }

  this.decode = function(str) {
    return base64_decode(str);
  }

  this.$get = function() {
    return {};
  }

});

var myApp = angular.module('myApp',['services.base64'])

myApp.config(['base64Provider', function (base64Provider) {
    $httpProvider.defaults.transformRequest = function(request){return base64Provider.encode(request)};

    $httpProvider.defaults.transformResponse = function(response){return base64Provider.decode(response)};
}]);

答案 2 :(得分:0)

这就是我在过滤器中的表现。 item.htmlBody包含带有html标记的base64编码文本

// in template
<div ng-bind-html="item.htmlBody | decodeBase64">{{item.htmlBody}}</div>

//inside controller.js

.filter('decodeBase64', function(){
   return function(text){
   return atob(text);
   }
})

嗯,我知道这并没有完全回答这个问题,但通过一些小调整,你可以得到你想要的东西(针对同样问题的未来人)