Question

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

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

    <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，则将其隐藏在导航栏之外，但不会阻止用户在网址中输入该内容。

虽然技术上有点偏离主题，但我认为更好的做法是使用多个shell，详见答案：How to render different view structures in Aurelia?

基本思路是在app启动时将用户发送到登录应用程序，然后在登录时将它们发送到主应用程序。

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/

Answer 3

虽然我喜欢PW Kad的解决方案（它看起来更干净），但这是我使用自定义valueConvertor采用的方法：

NAV-一个bar.html

<ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation | authFilter: isLoggedIn" class="${row.isActive ? 'active' : ''}" >

      <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="row.href">${row.title}</a>
    </li>
  </ul>

NAV-bar.js

import { bindable, inject, computedFrom} from 'aurelia-framework';
import {UserInfo} from './models/userInfo';

@inject(UserInfo)
export class NavBar {
@bindable router = null;

constructor(userInfo){
    this.userInfo = userInfo;
}

get isLoggedIn(){
    //userInfo is an object that is updated on authentication
    return this.userInfo.isLoggedIn;
}

}

authFilter.js

export class AuthFilterValueConverter {
toView(routes, isLoggedIn){
    console.log(isLoggedIn);
    if(isLoggedIn)
        return routes;

    return routes.filter(r => !r.config.auth);
}
}

请注意以下事项：

您的isLoggedIn getter将不断被轮询
您可以使用if.bind =＆＃34;！row.config.auth ||实现相同的目标$ parent.isLoggedIn＆＃34;绑定，但要确保你的if.bind绑定在repeat.for

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

3 个答案:

main.js

app.js