使用 Oauth2、angular 和 yii2 REST 从受保护的文件夹中提供图像答案

【问题标题】：serve images from protected folder using Oauth2, angular and yii2 REST使用 Oauth2、angular 和 yii2 REST 从受保护的文件夹中提供图像
【发布时间】：2016-03-03 13:53:14
【问题描述】：

我的项目必须处理非常敏感的图像，未经授权的用户不应访问这些图像，这些图像保存在受保护的位置。对于常规的 http 请求，我之前已经这样做了，但现在我在前端有 angular 应用程序，带有 Oauth2 客户端，并且在服务器端有 Yii2 驱动的 API。我想知道这样做的最佳做法是什么，我是否应该创建新的 yii\web\Controller 来提供图像（创建和删除图像仍将在 rest 控制器中），这会给我带来一些授权困难，而且看起来很不错哈基。或者我应该在 yii REST 控制器中使用原始输出格式，并将图像渲染为响应？如果可行的话，我更喜欢第二种方法，因为我是 angular.js 的新手，不知道如何做到这一点，理想情况下我想将图像渲染为简单的

<img src="example/image/123" />

我想排除 base64 编码，因为这需要双方的一些处理能力

【问题讨论】：

标签： angularjs rest angularjs-directive oauth-2.0 yii2

【解决方案1】：

第二种方法可以通过URL.createObjectURL 实现。在 PHP 方面，您只需使用 readfile() 之类的东西。在 Angular 方面，尝试这样的事情

$http.get('example/image/123', {
    responseType: 'blob',
    headers: {
        Authorization: 'Bearer super-secret-token'
    },
    transformResponse: function(data) {
        return ($window.URL || $window.webkitURL).createObjectURL(data);
    }
}).then(function(response) {
    $scope.imageUri = response.data;
});

在你的模板中

<img ng-src="{{imageUri}}">

当您不再需要图像时，例如当您当前的作用域被破坏时，您可能还应该触发 URL.revokeObjectURL，例如

$scope.$on('$destroy', function() {
    ($window.URL || $window.webkitURL).revokeObjectURL($scope.imageUri);
});

【讨论】：

只是添加。对于启用了 mod 的 apache 或 nginx，最好使用 x-send-file 标头。因为readfile() 在高负载下会严重影响性能。
@Phil，我宁愿使用element.attr('src', response.data) 将响应数据直接绑定到src 属性，因此无需包含和撤消来自$scope 对象的数据。谢谢
@dzona 当然，你可以做到。使用$scope 只是一个例子