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

Я думаю, что Аурелия 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. Это предотвратит проблемы, когда пользователь снова войдет в систему. Подробнее здесь и здесь.

Answer 2

Для рабочего примера setRoot вы можете также проверить https://foursails.github.io/sentry https://github.com/foursails/sentry