无法将本地存储数据绑定到 Iron-ajax 标头答案

【问题标题】：Unable to Databind localstorage to iron-ajax headers无法将本地存储数据绑定到 Iron-ajax 标头
【发布时间】：2016-02-22 13:34:25
【问题描述】：

我使用的是最新的 Polymer (1.2.0)，但在从 iron-localstorage 到 iron-ajax 标头字段的数据绑定方面遇到了问题。检查请求时，我没有看到 Authorization 标头集。当我只创建一个没有数据绑定的有效标头对象时，我已经验证了请求是否有效。

是我做错了什么，还是它不是为这样使用而设计的？

<iron-localstorage name="userToken" value="{{localtoken}}" use-raw></iron-localstorage>

<iron-ajax url="api/twitter/v1/private/gettweets" last-response="{{data}}" auto
           headers= '{"Authorization":"Bearer [[localtoken]]}"'
           handle-as="json">
</iron-ajax>
<iron-list items="[[data.futuretweets]]" as="item">
    <template>
        <div>
            datetime: <span>[[item.datetime]]</span>
            text: <span>[[item.text]]</span>
        </div>
    </template>
</iron-list>

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

我找到了一些解决方法。我正在使用启用了身份验证服务的环回，并且我正在使用iron-localstorage 保存身份验证令牌。我发现的问题是iron-ajax 的“自动”让在iron-ajax 参数的任何（几乎）更改时启动请求。当请求开始时，localstorage 值尚未填充

<iron-localstorage name="appdata" value="{{user}}"></iron-localstorage>

和

<iron-ajax auto="{{user.id}}" headers$='{"Authorization" :"{{user.id}}"}' url="/api/data" handle-as="json" last-response="{{data}}"></iron-ajax>

解决方法在auto="{{user.id}}" 中。虽然未加载用户，但 user.id 为假。加载后，它变成了与真实匹配的东西。这也会导致 iron-ajax 标头属性内部发生变化，并导致“自动”请求发送被触发。

【讨论】：

我认为 $= 仅用于基本的 HTML 属性绑定？

【解决方案2】：

我认为您的复合绑定中存在拼写错误，这是一个更正的版本：

<iron-ajax url="api/twitter/v1/private/gettweets" last-response="{{data}}" auto
           headers= '{"Authorization":"Bearer [[localtoken]]"}'
           handle-as="json">
</iron-ajax>

[EDIT] 因为它不起作用，请尝试使用这样的计算函数：

<iron-ajax url="api/twitter/v1/private/gettweets" last-response="{{data}}" auto
           headers='_computeHeaders(localtoken)'
           handle-as="json">
</iron-ajax>

在哪里

_computeHeaders(localtoken) {
  return {"Authorization": "Bearer " + localtoken};
}

【讨论】：

@mrbradford 你解决了你的问题吗？
嗨！我确实修正了错字——不幸的是，它没有解决问题。仍然没有发送授权标头。没有控制台错误，除了 500 我的服务器在缺少 Auth 标头时回复。
应用了一次编辑：如果您从计算函数返回一个对象而不是字符串，它会更加健壮并节省序列化+反序列化步骤。

【解决方案3】：

不应该：

_computeHeaders(localtoken) {
  return '{"Authorization":"Bearer ' + localtoken + '"}';
}

改为：

_computeHeaders: function(localtoken){
  return '{"Authorization":"Bearer ' + localtoken + '"}';
}

【讨论】：

两者都有效，但后者在更多浏览器中得到支持，因为前者是 ES6 改进的对象字面量语法的一部分。