angularjs - 使用 Oauth2、Angular 和 yii2 REST 提供 protected 文件夹中的图像

Question

我的项目必须处理非常敏感的图像，未经授权的用户不应访问这些图像，并将其保存在 protected 位置。我以前曾针对常规 http 请求做过此操作，但现在我在前端有带有 Oauth2 客户端的 Angular 应用程序，在服务器端有 Yii2 支持的 API。我想知道执行此操作的最佳实践是什么，我是否应该创建新的 yii\web\Controller 来提供图像(创建和删除图像仍将在其余 Controller 中)，这会给我带来一些授权困难，而且看起来有点像哈克。 或者我应该在 yii REST Controller 中使用原始输出格式，并渲染图像作为响应？ 如果可行的话，我更喜欢第二种方法，因为我是 angular.js 的新手，不知道如何做到这一点，理想情况下我想将图像简单地渲染为

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

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

Answer 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);
});