Как переключаться между страницей входа и приложением с 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>

Очевидно, что это не работает (если вы не обновите страницу /f 5), так как app.js/app.html является корневым маршрутом, который всегда присутствует и никогда не изменяется. Но я надеюсь, что логика в разметке поможет проиллюстрировать, что я хочу решить?

Я предполагаю, что если бы я знал, как перезагрузить родительский маршрут (app.js), когда я перемещаюсь с логина входа, при успехе входа в систему, на другой маршрут. И снова, когда я выхожу из системы, родительский маршрут (app.js) должен быть снова обновлен. Тогда все мои проблемы будут решены.

Что мне здесь не хватает?: -)

ОТВЕТЫ

Ответ 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 ищет модель view.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 маршрутизатор и соответственно обновите URL-адрес. Это предотвратит проблемы, когда пользователь снова зайдет. Более подробная информация в здесь и здесь.