聚合物，更改链式应用程序路径元素上的路径

Question

我在具有以下结构的项目中使用 https://github.com/PolymerElements/app-route 中的 app-route 元素：

一个 my-app 元素包含以下代码：

<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>
...

一个 store-main-page 元素具有：

<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>
...

因此，访问 / 路径将显示欢迎页面并访问 /loja/categoria，my-app 将调用 store-main-page，然后将调用 category-page .

我的问题是，我想在显示 store-main-page 之前对用户进行身份验证，如果用户未通过身份验证，则将他重定向到 / 上的欢迎页面。有没有办法使用 app-route 来做到这一点？

我发现使用 app-route 更改页面的唯一方法是调用

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

但这不适用于链式路由，在我的情况下，这将导致重定向到 /loja/ 路径，这不是我想要的。

如何更改父元素上的路由？这可能吗？

Answer 1

我刚刚发现 app-location 只是 iron-location 和 app-route 之间的接口。

所以我解决了向我的子元素添加 iron-location 并更改其 path 属性.

的问题

确切的代码是：

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

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

我不知道这是否是理想的解决方案，但它确实有效。

聚合物，更改链式应用程序路径元素上的路径

Polymer, change route on chained app-route element

polymer

polymer-1.0