CODEWITHSUNDEEP
polymerpolymer-1.0
Andrew Pacífico
Andrew Pacífico

Reputation: 86

Polymer, change route on chained app-route element

I'm using the app-route element from https://github.com/PolymerElements/app-route on a project with the following structure:

A my-app element containing the following code:

<app-location route="{{route}}"></app-location>
<app-route
  route="{{route}}"
  pattern="/:page"
  data="{{routeData}}"
  tail="{{subroute}}">
</app-route>

<iron-pages selected="[[page]]" attr-for-selected="name">
  <store-main-page 
    name="loja" 
    route="{{subroute}}" 
    categories="[[categories]]">
  </store-main-page>
  ...
</iron-pages>
...

A store-main-page element with:

<app-route
  route="{{route}}"
  pattern="/:page"
  data="{{routeData}}"
  tail="{{subroute}}">
</app-route>

<iron-pages selected="[[page]]" attr-for-selected="name">
  <category-page 
    name="categoria" 
    route="{{subroute}}" 
    selected-category="{{selectedCategory}}"
    cart="{{cart}}">
  </category-page>
  ...
</iron-pages>
...

So, accessing / path a welcome page will be displayed and accessing /loja/categoria, the my-app will call store-main-page that will call the category-page.

My problem is, I want to authenticate the user before display the store-main-page, and if the user is not authenticated, redirect him to welcome page on /. Is there a way to do this using app-route?

The only way I found to change page using app-route is to call

this.set('route.path', 'path');

But this does not work on chained routes, on my situation, this will result on redirecting to /loja/ path, which is not what I want.

How can I change the route on a parent element? Is that possible?

Upvotes: 2

Views: 1143

Answers (1)

Andrew Pac&#237;fico
Andrew Pac&#237;fico

Reputation: 86

I just figured out that app-location is just an interface between iron-location and app-route.

So I solved the problem adding an iron-location to my child element, and changing its path property.

The exact code was:

  <iron-location id="ironLocation"></iron-location>
...
</template>

<script>
...
  attached: function() {                    
    if (!userAuth()) {            
      this.$.ironLocation.set('path', '/');            
    } else {
      ...
    }                                      
  }
...

I don't know if this is the ideal solution, but it works.

Upvotes: 3

Related Questions