在全球范围内应对聚合物中的 401答案

【问题标题】：Responding Globally to a 401 in Polymer在全球范围内应对聚合物中的 401
【发布时间】：2015-08-25 08:16:34
【问题描述】：

使用 Polymer 1.0，我正在寻找在应用从应用服务收到 401 时向用户显示登录信息的最佳方法。

使用 Angular 我会考虑使用 httpInterceptor 来执行此操作，Polymer 中是否有等价物？

这是一种从服务元素显式路由错误的方法（使用 Iron-ajax）

<template is="dom-bind" id="app">
    <values-service values="{{items}}" on-error="onError"></values-service>

    <h1>Items <span>{{items}}</span></h1>

    <template is="dom-repeat" items="{{items}}">
        <p>{{item}}</p>
    </template>
</template>

<script src="app.js"></script>

还有我的应用脚本

(function (document) {
    'use strict';

    var app = document.querySelector('#app');

    app.onError = function (e) {

        console.log('app.onError ' + e.detail.request.status);
    };

    app.addEventListener('error', app.onError);

})(document);

这可行，但由于登录是我想要发生的事情，而不必专门连接元素

【问题讨论】：

标签： http login polymer polymer-1.0 http-status-code-401

【解决方案1】：

为了解决这个问题，我创建了一个用于所有 Ajax 请求的组件。在该组件中，监听来自服务调用的 401，并在找到时调用 this.fire('401-found')。

然后在我的其他组件中，我监听了这样的事件 - 在我的例子中，在主文档中，弹出一个对话框，要求用户再次登录。

稍微好一点的方法是让 Ajax 组件接受参数来表示“是的，触发 401 事件”和“不要给它标准的 401 事件，将其命名为这个”，然后在您可以监听的每个组件中此类事件并做出相应反应。

【讨论】：

感谢您的回复，这是个好主意。问题是我可能正在使用我没有编写的 ajax 组件：/
为什么不将这些 ajax 组件嵌入到您自己的组件中呢？我嵌入了聚合物 ajax 组件，然后查看了 401 响应的响应对象。您使用哪些组件进行服务调用？
这就是我的示例中的 values-service，但这里的重点是全局 401 处理
将value-services包装在一个新组件中，将值和错误值传递给新组件的用户，并在onError回调中，如上所述查找401并触发事件？

【解决方案2】：

答案是在事件通过 dom 冒泡时在最外层元素上捕获错误

<div on-error="onError">
    <values-service values="{{items}}"></values-service>
    <other-service></other-service>
    ...

</div>

还有一些脚本（如上）

app.onError = function (e) {

    console.log('app.onError ' + e.detail.request.status);
};

当任何包含的服务或包含服务的任何包含的元素触发错误时，处理程序将触发 - 我对请求和 401 进行相关检查并显示我的登录对话框

【讨论】：

唯一的缺点是每次回调都必须进行 401 检查；当您拥有足够多的代码时，会出现大量重复且可能很脆弱的代码。如果将 value-service 元素包装在一个新元素中，则可以使用相同的系统，该元素会查找 401 并明确触发命名为 401 的事件。
401 由我的 api 控制
这种方式意味着没有重复，根目录下只有一个 401 处理程序。所以不像你描述的那样

【解决方案3】：

我最近向iron-ajax（几天前合并）做了一个公关，添加了一个可选的bubbles 属性来完成这个。当bubbles 属性存在时，iron-ajax 的request、response 和error 事件冒泡到window。这意味着您可以在 window 上拥有全局事件侦听器并处理 401s，但您无需任何重复代码，即在您的 Iron-ajax 调用中添加 bubbles。

更重要的是，因为它是 Iron-ajax 的一部分，所以得到了 Polymer 团队的官方支持。

这里是the official docs。

【讨论】：