javascript - con - title css

Cómo cambiar entre la página de inicio de sesión y la aplicación con Aurelia

Question

Estoy usando el esqueleto de Aurelia para mi proyecto. Todo parecía muy intuitivo, sin embargo, tengo un problema que sospecho que es bastante fácil (si sabes cómo).

El problema es que app.html / app.js muestra inicialmente una barra de navegación y carga algunos estilos predeterminados.

Ahora necesito una página de inicio de sesión, que no carga nada más que sus propios estilos, no hay barra de navegación, nada, solo su propio formulario de inicio de sesión.

Así que intenté algo como esto:

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>

Obviamente, eso no funciona (a menos que actualices la página / f5), ya que app.js / app.html es la ruta raíz que siempre está presente y nunca cambia. ¿Pero espero que la lógica dentro del marcado ayude a ilustrar lo que busco resolver?

Supongo que si supiera cómo volver a cargar la ruta principal (app.js) cuando navego desde la ruta de inicio de sesión, al iniciar sesión correctamente, a otra ruta. Y nuevamente cuando cierre la sesión, la ruta principal (app.js) también debe actualizarse una vez más. Entonces todos mis problemas se resolverían.

¿Que me estoy perdiendo aqui? :-)

Answer 1

Creo que la función setRoot(module) aurelia ayudará con esto.

Aquí está el archivo main.js estándar que " main.js " la aplicación aurelia:

main.js

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

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

Cuando se llama a setRoot sin argumentos, Aurelia busca un modelo de vista y vista app.js + app.html.

Podemos ajustar la lógica para verificar si el usuario ha iniciado sesión y, si no, mostrar la pantalla de inicio de sesión:

main.js

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

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

Luego, en su modelo de vista de inicio de sesión, puede llamar a setRoot(''app'') después de que el usuario haya iniciado sesión correctamente:

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: si su aplicación incluye una función de "cierre de sesión" que enviará al usuario nuevamente a la pantalla de inicio de sesión (por ejemplo, setRoot(''login'') ), asegúrese de reiniciar el enrutador y actualizar la URL en consecuencia. Esto evitará problemas cuando el usuario vuelva a iniciar sesión. Más detalles here y here .

Answer 2

Para ver un ejemplo práctico de setRoot, también puede consultar https://foursails.github.io/sentry https://github.com/foursails/sentry