隐藏Aurelia导航栏中的路线,直至通过认证

Question

是否有一种正确的方法可以隐藏Aurelia启动应用程序中的项目.

现在我只是根据自定义属性为每个元素添加一个类.这感觉非常hacky.

    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}${!row.isVisible ? 'navbar-hidden' : ''}">
      <a href.bind="row.href">${row.title}</a>
    </li>

Answer 1

你可以在这里找到两个方向.

第一种是在自定义属性设置时,仅在导航栏中显示导航链接.为了清理它,让我们使用show binding -

  <li repeat.for="row of router.navigation" show.bind="isVisible" class="${row.isActive ? 'active' : ''}">
    <a href.bind="row.href">${row.title}</a>
  </li>

这里的问题是你仍然需要像你已经做的那样维护自定义属性.另一种方法是重置路由器.这基本上涉及构建一组在用户未经身份验证时可用的路由,然后在用户进行身份验证后构建一个单独的路由-

this.router.configure(unauthenticatedRoutes);
// user authenticates
this.router.reset();
this.router.configure(authenticatedRoutes);

这使您可以根据需要灵活地重新配置路由器.

Answer 2

这些答案很棒,但出于身份验证的目的,我认为没有任何你想要的安全属性.例如,如果您有路线/#/topsecret,隐藏它将使其远离导航栏,但不会阻止用户在URL中键入它.

虽然从技术上来说这有点偏离主题,但我认为更好的做法是使用多个shell,详见答案:如何在Aurelia中呈现不同的视图结构？

基本思路是在启动应用程序时将用户发送到登录应用程序,然后在登录时将其发送到主应用程序.

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // notice that we are setting root to 'login'
  aurelia.start().then(app => app.setRoot('login'));
}

app.js

import { inject, Aurelia } from 'aurelia-framework';

@inject(Aurelia)
export class Login {
  constructor(aurelia) {
    this.aurelia = aurelia;
  }
  goToApp() {
    this.aurelia.setRoot('app');
  }
}

我还写了一篇深入的博客,里面有关于如何做到这一点的例子:http://davismj.me/blog/aurelia-login-best-practices-pt-1/