Responding Globally to a 401 in Polymer

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.