Как переключаться между страницей входа и приложением с 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/приложение .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 + приложение. 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 the router и обновить URL соответственно. Это предотвратит возникновение проблем, когда пользователь снова зайдет. Более подробная информация находится в here и here.

Answer 2

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