如何在Aurelia之间切换登录页面和应用程序 [英] How to switch between login page and app with Aurelia

问题描述

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

I'm using the Aurelia skeleton for my project. Everything seemed so intuitive, however I'm stuck with a problem which I suspect is fairly easy (if you know how).

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

The problem is that the app.html / app.js is initially showing a nav bar and loading some default styles.

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

Now I need a login page, which does not load anything but its own styles, no navbar no nothing - just its own login form.

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

So I tried something like this:

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是始终存在且永不改变的根路由。但是我希望标记中的逻辑有助于说明我想要解决的问题？

Obviously that doesn't work (unless you refresh the page/f5), since the app.js / app.html is the root route which is always present and never changes. But I hope the logic within the markup helps illustrate what I'm looking to solve?

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

I guess my if only I knew how to reload the parent route (app.js) when I navigate from the login route, on login success, to another route. And again when I logout, the parent route (app.js) should be refreshed as well once again. Then all my problems would be solved.

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

What am I missing here? :-)

推荐答案

我认为aurelia的 setRoot（模块）函数将会帮助。

I think aurelia's setRoot(module) function will help with this.

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

Here's the standard main.js file that "bootstraps" the aurelia app:

main.js

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

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

当<$调用c $ c> setRoot 时没有参数Aurelia查找app.js + app.html viewmodel和view。

When setRoot is called with no arguments Aurelia looks for an app.js + app.html viewmodel and view.

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

We can adjust the logic to check whether the user is logged in and if not, show the login screen:

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'）：

Then in your login view model you can call setRoot('app') after the user has successfully logged in:

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'）），请务必重置路由器并相应地更新网址。这将防止用户重新登录时出现问题。有关详细信息，请参阅此处和这里。

Note: if your app includes a "logout" feature that will send the user back to the login screen (eg setRoot('login')), be sure to reset the router and update the url accordingly. This will prevent issues when the user signs back in. More details in here and here.

这篇关于如何在Aurelia之间切换登录页面和应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！