Polymer 1.0: Controlling Access to or from a Route

Question

Angular2 uses Route guard To control whether the user can navigate to or away from a given route,so if unauthorised user try to access a path route guard will protect.

Is there any alternate way for route guard in polymer 1.0? if not how it can be implemented?

Answer 1

I don't know of any existing implementation, though it's always a good idea to search http://webcomponents.org, since one might pop up there any second.

To implement this yourself, start by creating some kind of rights management behavior (or mixin class in Polymer 2) (which might query a web service for a map of {right1: Array<User>, ...}; but don't forget about caching and so on...) which has a method checkRight(rightName, user). You can then mix in that behavior/class to consuming elements, and bind the method checkRight to any element you want to guard, for example an iron-pages' child's hidden-attribute:

<dom-module id="my-app">
<template>
    <iron-pages ...>
        <my-page-1 hidden$="[[checkRight('right1', currentUser)]]"></my-page-1>
        <my-page-2 hidden$="[[checkRight('right2', currentUser)]]"></my-page-2>
        ...
    </iron-pages>
</template>
<script>
    Polymer({
        is: 'my-app',
        properties: {
            currentUser: {...}
        },
        behaviors: [My.RightsManagedBehavior]
    });
</script>
</dom-module>