AngularJS：使用 ng-src 指令时使用 $http 拦截器和 OAuth 令牌答案

【问题标题】：AngularJS: using $http interceptors and OAuth tokens when using ng-src directiveAngularJS：使用 ng-src 指令时使用 $http 拦截器和 OAuth 令牌
【发布时间】：2015-07-15 06:01:54
【问题描述】：

我正在构建一个 Cordova/Phonegap 应用程序，该应用程序通过使用 OAuth 的 JSON API 与 Rails 服务器交互。

我已经有很多按钮驱动的功能在工作，我正在使用 http 拦截器来捕获请求新 OAuth 令牌的 401 Unauthorized 服务器响应，然后重试相同的请求。

我的解决方案基本上是基于这个代码：https://github.com/witoldsz/angular-http-auth

但在通过<img ng-src="image/url"> 获取图像时，我不知道如何执行所有这些操作。

所以我的问题有两个：

1- 如何在ng-src 请求中注入 OAuth 令牌？

2- 如何拦截更新授权令牌的 401 响应并重试请求？

【问题讨论】：

不确定这是否正是您正在寻找的，但这是一个很棒的教程，可能会有所帮助thinkster.io/angular-rails
谢谢@PaulFitzgerald。这确实看起来像一个很棒的教程，但它并不能完全帮助我解决这个特定问题。我正在专门研究如何在使用 ng-src 指令时实现 OAuth 安全性。最重要的是，如何拦截服务器响应，就像使用普通的 $http 请求一样。

标签： javascript ruby-on-rails angularjs cordova oauth

【解决方案1】：

瓦斯科！你好吗？

我使用了一种类似于此链接中使用的方法： https://github.com/dougmoscrop/angular-img-http-src/blob/master/index.js

我将其中的一部分添加到我的控制器中：

function SampleCtrl($scope, $http) {
    $scope.ImageUrl = '';

    // this method can be on a service ($http or $resource)
    $scope.getImageService = function (imageId) {
        return $http.get('../MyApi/MyAction/', {
            responseType: 'arraybuffer',
            params: { id: imageId }
        });
    };

    // this will be called when you need to load the image
    $scope.loadImage = function(imageId)
    {
        $scope.getImageService(imageId).then(function (response) {
            var imageBlob = new Blob([response.data], { type: response.headers('Content-Type') });
            $scope.ImageUrl = (window.URL || window.webkitURL).createObjectURL(imageBlob);
        });
    };

    $scope.loadImage('image_001');
}

html 看起来像：

<img ng-src="{{ImageUrl}}" alt="alternate" title="title" />

这样做，拦截器将处理 http get 并包含带有 OAuth 令牌的标头。

【讨论】：

【解决方案2】：

要回答这两个问题，您需要一个 http 拦截器，它将 1) 将 Oauth 令牌设置到所有发出的请求中，以及 2) 捕获 401 错误并为您解决它们，在必要时刷新和设置身份验证令牌.

查看excellent post 了解如何操作。另请阅读 $http interceptors 上富有洞察力的 AngularJs 文档。一切都在那里。

我真的希望这些对您有所帮助。最好的。

【讨论】：