从 API 加载受保护的图像

Question

我正在使用 EmberJS 以及 ember-simple-auth 和 ember-data 来验证和从我的 API 检索数据。我的模型之一包含指向图像 URL 的属性。我想在我的应用程序中显示这些图像。我可以使用

<img class="thumbnail" src="{{user.thumbnail}}" />

问题是图像受到保护，需要设置“授权”标头，否则 API 返回 401。我考虑将令牌作为查询参数添加到 URL 并修改 API 以接受它，但是这似乎是个坏主意，因为身份验证令牌将出现在日志中。有没有一种 EmberJS 方法可以从安全的 API 中检索图像？

Answer 1

根据您的评论进行编辑：

这是一个服务器端解决方案，因此它会让您的 ember 代码保持原样。 方法是永远不要将实际令牌与图像一起发送，而是使用服务器上的令牌来生成会话特定的图像 url。

这样，您永远不会暴露图像的绝对路径，而是创建解析为绝对路径的相对 url。您可以使用会话令牌作为加密算法（如 md5）的密钥，并创建相对 url，这些 URL 将对客户端隐藏敏感信息（例如令牌），因此您永远不会将令牌作为查询参数发送。

请注意，这确实意味着如果用户登录并共享这些图像链接，则使用该链接的任何人都可以看到这些图像，直到用户注销（并且他的会话被破坏）。

---

之前的建议

您可以制作一个小组件来为您执行此操作，您可以在其中传递 url，也可以传递令牌或通过身份验证服务获取它。然后使用计算属性将两者结合起来。这是一个粗略的例子：

// components/auth-img.js
export default Ember.Component.extend({

  // passed in
  class: '',
  url: '',
  token: '',

  // local
  tagName: 'img',
  classNameBindings: ['class'],
  attributeBindings: ['src'],

  src: Ember.computed('url', 'token', function() {
    let { url, token } = this.getProperties('url', 'token');
    // combine your url and token and return
    return // ...
  })
});

及用法：

{{auth-img class="thumbnail" url=user.thumbnail}}