Question

在以编程方式将用户令牌添加到iron-ajax元素的headers属性后，我尝试生成Iron-Ajax请求。问题是控制台给我一个401（未经授权）。但是，我确信令牌是正确的，问题必须是我实施它的方式。

出于测试目的，我在从铁存储器中检索它后记录该令牌，并记录我的计算功能应该绑定到iron-ajax的headers属性的返回。我在控制台中返回的所有结果都是正确的。此外，当我在iron-ajax的标题内硬编码令牌时，整个过程都有效。这就是为什么我确信问题来自其他地方。我现在在计算headers属性后创建请求，而不是在iron-ajax上设置auto，因为我认为问题可能是在请求完成后可能会执行compute函数。但是我无法让它发挥作用。

我希望有人可以指出我的错误方向。

<dom-module id="my-newsfeed-view">
  <template>

    <iron-ajax
      id="requestNews"
      url="http://api.mjp.dev/v1/news/"
      handle-as="json"
      headers='{{header}}'
      loading="{{isloading}}"
      last-response="{{response}}"></iron-ajax>

  </template>
  <script>
    Polymer({
    is: 'my-newsfeed-view',

    properties: {
      user: {
        type: String,
      },
      header: {
        computed: 'computeHeader(user)'
      },

    },

    ready: function() {
      // Get User key from the Storage
      this.$.localstorage.reload();
      // console.log('This token is:' + this.user.token);

      this.computeHeader();
      // console.log('{"Authorization": "Bearer ' + this.user.token + '"}');
      this.$.requestNews.generateRequest();
    },

    computeHeader: function(user) {
      return '{"Authorization": "Bearer ' + this.user.token + '"}';
    },

    });
  </script>
</dom-module>

Answer 1

第一个问题是computeHeader()在返回string时返回Object。 <iron-ajax>会自动反序列化Object，并将其合并到请求标头中。它应该是这样的：

computeHeader: function(user) {
  return {Authorization: 'Bearer ' + user.token};
}

您也无需在computeHeader()内拨打ready()。

第二个问题是this.user是string，传递给computeHeader(user)，假设其user参数是包含token的对象。目前还不清楚代码中user的设置方式，但您可以考虑添加token属性，以替换user中的computeHeader(token)。

演示：

HTMLImports.whenReady(() => {
  "use strict";

  Polymer({
    is: 'x-foo',
    properties: {
      headers: {
        computed: '_computeHeader(token)'
      },
      token: {
        type: String,
        value: '1234'
      }
    },
    _computeHeader: function(token) {
      return {Authorization: 'Bearer ' + token};
    },
    _onResponse: function(e) {
      console.log('response', e.detail.response);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax auto headers="[[headers]]" url="https://httpbin.org/get" on-response="_onResponse"></iron-ajax>
    </template>
  </dom-module>
</body>

codepen

在请求完成之前无法计算Polymer iron-ajax headers属性

1 个答案: