在 Aurelia 导航栏中隐藏路线，直到通过身份验证

Question

是否有适当的方法来隐藏 Aurelia 入门应用程序中的项目以进行某种身份验证。

现在我只是根据自定义属性向每个元素添加 class。这感觉非常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

这里有两个方向。

首先是在像您一样设置自定义属性时仅在导航栏中显示导航链接。为了稍微清理一下，让我们使用显示绑定 -

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

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

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

这使您可以在需要时灵活地重新配置路由器。

Answer 2

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

导航-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>

导航-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="!row.config.auth || $parent.isLoggedIn" 绑定实现相同的效果，但请确保您的 if.bind 绑定在您的绑定之后repeat.for

Answer 3

这些答案很好，但出于身份验证的目的，我认为没有任何答案具有您想要的安全属性。例如，如果您有一条路线 /#/topsecret，隐藏它会使它远离导航栏，但不会阻止用户在 URL 中输入它。

虽然这在技术上有点偏离主题，但我认为更好的做法是使用多个 shell，详见此答案：

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

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 4

我意识到这有点死灵，但我想添加一个答案，因为接受的答案提供了 against Aurelia docs 明确推荐的解决方案（您必须向下滚动到 reset() 方法。

我尝试了其他几种方法，取得了不同程度的成功，然后才意识到我看错了。路由限制是应用程序关心的问题，因此使用 AuthorizeStep 方法绝对是阻止某人进入给定路由的方法。不过，在我看来，过滤掉用户在导航栏上看到的路线是一个视图模型问题。不过，我并不真的觉得它像@MickJuice 那样是一个值转换器，因为我看到的每个例子都是关于格式化的，而不是过滤，而且我觉得把它放在导航栏视图模型。我的方法如下：

// app.js
import AuthenticationService from './services/authentication';
import { inject } from 'aurelia-framework';
import { Redirect } from 'aurelia-router';

@inject(AuthenticationService)
export class App {
  constructor(auth) {
    this.auth = auth;
  }

  configureRouter(config, router) {
    config.title = 'RPSLS';
    const step = new AuthenticatedStep(this.auth);
    config.addAuthorizeStep(step);
    config.map([
      { route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' },
      { route: 'teams', name: 'teams', moduleId: './my-teams', nav: true, title: 'Teams', settings: { auth: true } },
      { route: 'login', name: 'login', moduleId: './login', nav: false, title: 'Login' },
    ]);

    this.router = router;
  }
}

class AuthenticatedStep {
  constructor(auth) {
    this.auth = auth;
  }

  run(navigationInstruction, next) {
    if (navigationInstruction.getAllInstructions().some(i => i.config.settings.auth)) {
      if (!this.auth.currentUser) {
        return next.cancel(new Redirect('login'));
      }
    }

    return next();
  }
}

好的，如果用户未登录，它本身将限制用户对路由的访问。我可以轻松地将其扩展到基于角色的东西，但此时我不需要这样做。然后 nav-bar.html 就在骨架之外，但我没有直接在 nav-bar.html 中绑定路由器，而是创建了 nav-bar.js 来使用完整的视图模型，如下所示：

import { inject, bindable } from 'aurelia-framework';
import AuthenticationService from './services/authentication';

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

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

  get routes() {
    if (this.auth.currentUser) {
      return this.router.navigation;
    }
    return this.router.navigation.filter(r => !r.settings.auth);
  }
}

此时 nav-bar.html 不会遍历 router.navigation，而是遍历 routes 属性我在上面声明的：

<ul class="nav navbar-nav">
   <li repeat.for="row of routes" class="${row.isActive ? 'active' : ''}">
     <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
   </li>
</ul>

同样，您的里程可能会有所不同，但我想 post 这是因为我认为这是针对常见需求的相当干净且轻松的解决方案。

在 Aurelia 导航栏中隐藏路线，直到通过身份验证

Hiding routes in Aurelia nav bar until authenticated

aurelia

main.js

app.js