Come passare tra la pagina di accesso e l'app con Aurelia

Question

Sto usando lo scheletro di Aurelia per il mio progetto. Tutto sembrava così intuitivo, tuttavia sono bloccato da un problema che sospetto sia abbastanza facile (se sai come).

Il problema è che l'app.html/app.js mostra inizialmente una barra di navigazione e il caricamento di alcuni stili predefiniti.

Ora ho bisogno di una pagina di accesso, che non carichi nulla tranne i propri stili, nessuna barra di navigazione niente, solo il proprio modulo di accesso.

Così ho provato qualcosa di simile:

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> 

Ovviamente questo non dovesse funzionare (a meno che non si aggiorna la pagina/F5), dal momento che i app.js/app .html è la root route che è sempre presente e non cambia mai. Ma spero che la logica all'interno del markup aiuti a illustrare ciò che sto cercando di risolvere?

Suppongo che se solo sapessi come ricaricare la route principale (app.js) quando navigherò dalla rotta di accesso, in caso di accesso riuscito, a un'altra rotta. E ancora quando esco, anche la route principale (app.js) dovrebbe essere aggiornata ancora una volta. Allora tutti i miei problemi sarebbero risolti.

Cosa mi manca qui? :-)

Answer 1

Penso che la funzione setRoot(module) di aurelia aiuterà con questo.

Ecco il file standard main.js che "bootstrap" L'applicazione Aurelia:

main.js

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

    aurelia.start() 
    .then(a => a.setRoot()); // this is the equivalent of setRoot('app') 
} 

Quando setRoot viene chiamato senza argomenti Aurelia cerca un app.js + app. viewmodel html e vista.

Siamo in grado di regolare la logica per verificare se l'utente è connesso e se no, mostrare la schermata di login:

main.js

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

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

Poi, nel tuo modello di vista di login è possibile chiamare setRoot('app') dopo che l'utente ha effettuato l'accesso con successo:

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

Nota: se la vostra applicazione include una funzione "logout" che invierà l'utente alla schermata di accesso (ad esempio setRoot('login')), assicurarsi di reset the router e aggiornare l'URL di conseguenza. Ciò impedirà i problemi quando l'utente si disconnette. Ulteriori dettagli in here e here.

Answer 2

Per un esempio funzionante di setRoot è possibile controllare anche https://foursails.github.io/sentry https://github.com/foursails/sentry