从API加载受保护的映像

Question

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

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

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

Answer 1

根据您的评论进行编辑：

这是一个服务器端的解决方案，所以它会让你的ember代码保持原样。方法是从不发送带有图像的实际令牌，而是使用服务器上的令牌来生成特定于会话的图像URL。

这样，您就不会暴露图像的绝对路径，而是创建解析为绝对路径的相对URL。您可以使用会话令牌作为加密算法（如md5）的密钥，并创建相对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}}