Question

我正在为我的项目使用Aurelia骨架。一切似乎都很直观，但是我遇到了一个我怀疑相当容易的问题（如果你知道的话）。

问题是app.html / app.js最初显示导航栏并加载一些默认样式。

现在我需要一个登录页面，除了自己的样式之外不加载任何东西，没有任何导航栏 - 只有它自己的登录表单。

所以我尝试过这样的事情：

app.js

<template>
    <div if.bind="auth.isNotAuthenticated()">
        <require from="components/login/index" ></require>
        <login router.bind="router"></login>
    </div> 
    <div if.bind="auth.isAuthenticated()">
        <require from="nav-bar.html" ></require>
        <require from="../styles/styles.css"></require>
        <div class="container" id="banner">
            <div class="row">
                <img src="images/logo.png" />
            </div>
        </div>
        <nav-bar router.bind="router"></nav-bar>
        <div class="page-host">
            <router-view></router-view>
        </div>
    </div>
</template>

显然这不起作用（除非你刷新页面/ f5），因为app.js / app.html是始终存在且永不改变的根路由。但我希望标记中的逻辑有助于说明我想要解决的问题？

我猜我只知道当我从登录路线（登录成功）导航到另一条路线时，如何重新加载父路线（app.js）。当我退出时，父路线（app.js）也应该再次刷新。然后我的所有问题都将得到解决。

我在这里缺少什么？： - ）

Answer 1

我认为aurelia的setRoot(module)功能对此有帮助。

以下是“引导”aurelia应用程序的标准main.js文件：

<强> main.js

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

  aurelia.start()
    .then(a => a.setRoot()); // this is the equivalent of setRoot('app')
}

当没有参数调用setRoot时，Aurelia会查找app.js + app.html viewmodel和view。

我们可以调整逻辑以检查用户是否已登录，如果没有，则显示登录屏幕：

<强> main.js

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

  aurelia.start()
    .then(a => {
      if (userIsLoggedIn()) {
        a.setRoot('app');
      } else {
        a.setRoot('login');
      }
    });
}

然后在您的登录视图模型中，您可以在用户成功登录后调用setRoot('app')：

<强> login.js

import {Aurelia, inject} from 'aurelia-framework';
import {AuthService} from './my-auth-service';

@inject(Aurelia, AuthService)
export class Login {
  userName = '';
  password = '';

  constructor(aurelia, authService) {
    this.aurelia = aurelia;
    this.authService = authService;
  }

  submit() {
    // attempt to login and if successful, launch the app view model.
    this.authService.login(userName, password)
      .then(() => this.aurelia.setRoot('app'));
  }
}

注意：如果您的应用包含“退出”功能，该功能会将用户发送回登录屏幕（例如setRoot('login')），请务必reset the router并相应地更新网址。这可以防止用户重新登录时出现问题。here和here中的详细信息。

Answer 2

有关setRoot的工作示例，您也可以查看 https://foursails.github.io/sentry https://github.com/foursails/sentry

如何在Aurelia

2 个答案: