Responding Globally to a 401 in Polymer - http

Question

Using Polymer 1.0, I am looking for the best approach to showing a login to a user when the app receives a 401 from the app services.
Using Angular I would be looking at using a httpInterceptor to do this, is there an equivalent in Polymer?
Here's an approach which explicitly routes errors from a service element (using 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>
and my app 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);
this works, but as the login is something I want to happen without having to wire up elements specifically

Answer 1

To solve this, I created a component that was used for all my Ajax requests. In that component, listened for 401s from the service calls, and called this.fire('401-found') when found.
Then in my other components, I listened for such an event - in my case, in the main document, popping up a dialog asking the user to log in again.
A slightly better approach would be to have the Ajax component take in parameters to say 'yes fire a 401 event' and 'do not give it the standard 401 event, name call it this' then in each component you could listen for such events and react accordingly.

Answer 2

The answer is catching the error on an outermost element as the events bubble up through the dom
<div on-error="onError">
<values-service values="{{items}}"></values-service>
<other-service></other-service>
...
</div>
and some script (as above)
app.onError = function (e) {
console.log('app.onError ' + e.detail.request.status);
};
when any of the contained services, or any contained elements containing services fire an error, the handler will trigger - I do the relevant checks for a request and a 401 and show my login dialog

Answer 3

I recently made a PR to iron-ajax (which was merged a few days ago) that adds an optional bubbles attribute to accomplish exactly this. When the bubbles attribute is present, iron-ajax's request, response, and error events bubble to window. This means you can have global event listeners on window and handle 401s however you want without any more code duplication that adding bubbles to your iron-ajax calls.
What's more, because it's part of iron-ajax, it is officially supported by the Polymer team.
Here's the official docs.