14

是否有适当的方法在 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>
4

4 回答 4

18

您可以在这里采取两个方向。

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

  <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);

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

于 2015-03-06T14:26:37.593 回答
8

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

尽管从技术上讲它有点离题，但我认为更好的做法是使用多个外壳，如此答案中所述：如何在 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'));
}

应用程序.js

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

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

我还写了一篇深入的博客，其中包含有关如何执行此操作的示例：http: //davisj.me/blog/aurelia-login-best-practices-pt-1/

于 2015-09-22T16:54:51.043 回答
3

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

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

导航栏.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 之后
于 2015-05-18T20:33:04.243 回答
3

我意识到这有点像线程死灵法，但我想添加一个答案，因为接受的答案提供了 Aurelia 文档明确建议反对的解决方案（您必须向下滚动到该方法。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);
  }
}

而不是router.navigation在这一点上迭代，nav-bar.html将迭代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>

同样，您的里程可能会有所不同，但我想发布此内容，因为我认为这是针对常见要求的相当干净且无痛的解决方案。

于 2017-02-23T13:36:05.813 回答