AngularJS - 如何将所有 jsons 请求放气和编码/解码为 base64？答案

【问题标题】：AngularJS - How to deflate and encode/decode to base64 all jsons request?AngularJS - 如何将所有 jsons 请求放气和编码/解码为 base64？
【发布时间】：2012-12-30 12:14:21
【问题描述】：

假设我的 Angular 应用程序周围有几个 $resources 和一些 $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});

在发出实际请求/接收响应之前，我可以在哪里以及如何告诉 Angular 将 JSON 压缩和编码/解码为 base64？

我想我将包装外部库以用于放气和编码/解码到工厂。然后这个工厂会被注入到这里？喜欢 $httpBackend 吗？

【问题讨论】：

标签： json http base64 angularjs deflate

【解决方案1】：

您应该查看$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?

【讨论】：

谢谢您的回复。我很想在 myApp.config(function(){}) 中做类似$httpProvider.defaults.transformRequest = function(request){return Base64Factory.encode(request)}; 的事情，但据我所知，我无法在配置函数中注入工厂。你能更详细一点并帮助我吗？谢谢
我也试过在myApp.run(function(){})中完成，还是没有成功？
@Mark 您无法将提供程序注入运行块，因此尝试注入 $httpProvider 将导致错误。同样，不能将服务注入配置块。用更多信息更新了答案，但您也可以检查这个问题：stackoverflow.com/a/12903544/1418796
@all 毫无疑问，pkozlowski.opensource 的答案是正确的。我不知道为什么我强烈要求我必须将 base64 功能包装到工厂/服务中。但是最后我得到了 .provide() ，它可以被注入到配置函数中。它有效，但不知何故我觉得这不是理想的解决方案？请留下你的cmets..
在这里使用提供者 (.provide()) 并不理想，因为提供者应该创建新服务，而在这里您只是将其用作向配置块注入某些内容的一种方式。如果你真的需要让它注射，也许一个常数是一种方法？但是，如果您不需要通用 Base64 服务（对我来说这听起来更像是一个实用功能），我不会打扰。如果上述方法对您有用，请接受/投票赞成 anwser :-)

【解决方案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)};
}]);

【讨论】：

【解决方案3】：

这就是我在过滤器中的做法。 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);
   }
})

好吧，我知道这并不能完全回答这个问题，但是通过一些小的调整，你可以得到你想要的（针对未来有同样问题的人）

【讨论】：