Responding Globally to a 401 in Polymer

Asked By: Anonymous

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>

<a href="http://app.js">http://app.js</a>

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

Solution

Answered By: Anonymous

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