0

我在 AngularJS 中创建了一个使用基本授权的小型 Web 应用程序。为此，我在 app.js 中添加了以下行：

应用程序.js

.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common['Content-Type'] = 'application/json';
    $httpProvider.defaults.headers.common['Accept'] = 'application/json';
    $httpProvider.defaults.headers.common['Authorization'] = "Basic am9obkBqb2huLmNvbTpibGE=";
}]);

在服务器端，我使用 Spring MVC 来显示文件：

ImageResourceController.java

@Controller
@RequestMapping("/common/image")
public class ImageResourceController {
    @Autowired
    private FileService fileService;

    /***************************************************
    * URL: /api/common/image/{id}
    * Method: GET
    * get(): gets an image according to it's uuid from the db
    * @param id : String id (UUID)
    * @return ByteArray containing image
    ****************************************************/
    @RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.IMAGE_JPEG_VALUE)
    @ResponseBody
    public byte[] get(@PathVariable("id") String id) throws IOException {
        FileMeta fileMeta = fileService.loadFile(id);

        return IOUtils.toByteArray(fileMeta.getInputStream());
    }
}

文件服务.java

/**
 * File Service Layer takes care about the file operations to the database.
 * <p>
 */
@Service
public class FileService {
    @Autowired
    GridFsOperations gridOperation;

    /***************************************************
     * Loads a file with metadata from GridFS.
     * <p>
     * @param uuid : String uuid
     * @return fileMeta : FileMeta fileMeta
     ****************************************************/
    public FileMeta loadFile(String uuid) {
        FileMeta fileMeta = new FileMeta();

        try {
            GridFSDBFile gridFile = gridOperation.findOne(new Query(Criteria.where("metadata.UUID").is(uuid)));
            fileMeta.setMetaData(gridFile.getMetaData().toMap());
            fileMeta.setInputStream(gridFile.getInputStream());
        } catch (Exception e) {
            fileMeta = null;
            e.printStackTrace();
        }

        return fileMeta;
    }
}

FileMeta.java

/**
* FileMeta is used to transfer a file with metadata.
*
*/
public class FileMeta {
    private Map<String, Object> metaData;
    private InputStream inputStream;

    public Map<String, Object> getMetaData() {
        return metaData;
    }

    public void setMetaData(Map<String, Object> metaData) {
       this.metaData = metaData;
    }

    public InputStream getInputStream() {
        return inputStream;
    }

    public void setInputStream(InputStream inputStream) {
        this.inputStream = inputStream;
    }
}

spring-security.xml (intercept-url pattern="/api/** 适用)

<!-- Define security patterns to allow/disallow access -->
<http pattern="/favicon.ico*" security="none" />
<http pattern="/resources/**" security="none" />
<http use-expressions="true" create-session="stateless" auto-config='true' entry-point-ref="restAuthenticationEntryPoint">
    <intercept-url pattern="/api/**" access="hasRole('ROLE_USER')"/>
    <http-basic/>
</http>

授权适用于我使用 $http 和 $resource 进行的每个调用。但是，当我想使用 img ng-src（我正在使用 MongoDB 文件存储）从数据库中加载我的图像时，授权标头不会被解析到服务器并且登录失败。

<img ng-src="/api/common/image/5ac8618c-7979-4940-a038-1ea91fbd55b3"/><br/>

有人可以告诉我如何使用 img ng-src 发送授权标头吗？

我正在使用 AngularJS 1.2.0。

谢谢你的帮助。

4

1 回答 1

1

正如这里所说，您可以使用angular-img-http-src（bower install --save angular-img-http-src如果您使用Bower）。

如果您查看代码，它使用URL.createObjectURL并且URL.revokeObjectURL在2016 年 4 月 19 日仍处于草稿状态。因此请查看您的浏览器是否支持它。

为了使用它，声明'angular.img'为对您的应用程序模块 ( angular.module('myapp', [..., 'angular.img'])) 的依赖项，然后在您的 HTML 中，您可以使用标签的http-src属性。<img>

在您的示例中，它将是：<img http-src="/api/common/image/5ac8618c-7979-4940-a038-1ea91fbd55b3"/>

<img http-src="/api/common/image/{{imageId}}"/>但是您也可以使用例如使其动态化。

当然，这意味着您已经声明了一个拦截器，$httpProvider.interceptors.push用于添加您的自定义标头，或者您已经为每个请求静态设置了标头，使用$http.defaults.headers.common.MyHeader = 'some value';

于 2016-04-28T18:46:01.860 回答