web-dev-qa-db-ja.com

Aureliaでログインページとアプリを切り替える方法

プロジェクトに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>

App.js/app.htmlは常に存在し、変更されないルートルートであるため、明らかにそれは機能しません（page/f5を更新しない限り）。しかし、マークアップ内のロジックが、私が解決しようとしていることを説明するのに役立つことを願っていますか？

ログインルートからログイン成功時に別のルートに移動するときに、親ルート（app.js）をリロードする方法を知っていればと思います。また、ログアウトすると、親ルート（app.js）ももう一度更新する必要があります。そうすれば、私の問題はすべて解決されます。

ここで何が欠けていますか？ :-)

javascriptaurelia
20
Dac0d3r

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ビューモデルとビューを探します。

ロジックを調整して、ユーザーがログインしているかどうかを確認し、ログインしていない場合はログイン画面を表示できます。

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を更新します。これにより、ユーザーが再度サインインしたときの問題を防ぐことができます。詳細については、 ここ および ここ 。

35
Jeremy Danyow

SetRootの実用的な例については、 https://foursails.github.io/sentryhttps://github.com/foursails/sentry も確認できます。

4
Khuzema