Using app-router in a login protected site

[akc42]

I would like to create a single page app which is protected. That is, it can't be accessed unless the user is logged in.

I am thinking of creating an element that is part of the home page. When entering the home page, if the user is not already logged in, it will throw up a element (which you can't exit unless you do login) with the enough to input username and password and use to go get a web token from the server. will publish that token on an attribute.

Then before routing to any page other than the home page, I check the token and if not set route to home instead.

Looking through the source, I see it fires an 'activate-route-start' event on the router and the matched route. Your documentation doesn't mention them!

Can I add an event listener to the app-router which listens for this event, and if it sees it and the route is not for the home page and the token on the element does not have a value then executer a router.go back to the home page. I think this will force the user to have to login.

Another approach, which has just come to me - would be something like this

 <app-router>
   <app-route path="/">
     <my-login token="{{token}}">
     <img src="spash_image.jpg"/>
   </app-route>
   <template if="{{token}}">
     <app-route path="/some app path ..."></app-route>
     ...
   </template>
   <app-route path="*" redirect-"/"></app-route>
  <\app-router>

Would that work?

[erikringsmuth]

Check out this example https://erikringsmuth.github.io/app-router/#/events#polymer-event-mapping. I think it's exactly what you're looking for.

[akc42]

Thanks