So wechseln Sie zwischen Login-Seite und App mit Aurelia

Question

Ich benutze das Aurelia-Skelett für mein Projekt. Alles schien so intuitiv, aber ich stecke mit einem Problem fest, von dem ich annehme, dass es ziemlich einfach ist (wenn du weißt wie).

Das Problem ist, dass die app.html/app.js zeigt zunächst eine Navigationsleiste und laden einige Standard-Stile.

Jetzt brauche ich eine Login-Seite, die nichts als ihre eigenen Stile lädt, keine Navbar, nichts - nur ein eigenes Login-Formular.

Also habe ich versucht, so etwas wie dieses:

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> 

Offensichtlich das funktioniert nicht (es sei denn, Sie die Seite/f5 aktualisieren), da die app.js/app .html ist die Wurzelroute, die immer vorhanden ist und sich nie ändert. Aber ich hoffe, dass die Logik innerhalb des Markups hilft zu veranschaulichen, was ich zu lösen suche?

Ich glaube, wenn ich nur wüsste, wie ich die Elternroute (app.js) neu lade, wenn ich von der Login-Route, beim Login-Erfolg, zu einer anderen Route navigiere. Und noch einmal, wenn ich abmelde, sollte die übergeordnete Route (app.js) auch wieder aktualisiert werden. Dann wären alle meine Probleme gelöst.

Was fehlt mir hier? :-)

Answer 1

Ich denke, Aurelia setRoot(module) Funktion wird dabei helfen.

Hier ist der Standard main.js Datei, dass "Schopf aus dem Sumpf" die 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') 
} 

Wenn setRoot ohne Argumente Aurelia für eine app.js + app sieht genannt wird. HTML ViewModel und Ansicht.

Wir können die Logik anpassen zu überprüfen, ob der Benutzer in und wenn nicht angemeldet ist, zeigen die Login-Bildschirm:

main.js

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

    aurelia.start() 
    .then(a => { 
     if (userIsLoggedIn()) { 
     a.setRoot('app'); 
     } else { 
     a.setRoot('login'); 
     } 
    }); 
} 

Dann in Ihrem Modell Login Ansicht möglich rufen setRoot('app'), nachdem der Benutzer erfolgreich angemeldet hat:

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')); 
    } 
} 

Hinweis: wenn Ihre Anwendung eine „Logout“ Funktion beinhaltet, die die Benutzer zurück zum Login-Bildschirm senden (zB setRoot('login')), sollten Sie reset the router und die URL entsprechend aktualisieren. Dies verhindert Probleme, wenn sich der Benutzer wieder anmeldet. Weitere Einzelheiten finden Sie unter here und here.

Answer 2

Ein funktionstüchtiges Beispiel SetRoot können Sie auch für die erstaunliche Antwort https://foursails.github.io/sentry https://github.com/foursails/sentry