如何在Aurelia之间切换登录页面和应用程序

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)功能将有助于此.

这main.js是"引导"aurelia应用程序的标准文件:

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')),请务必重置路由器并相应地更新URL.这将防止用户重新登录时出现问题.此处和此处提供更多详细信息.