Cách chuyển giữa trang đăng nhập và ứng dụng với Aurelia

Question

Tôi đang sử dụng bộ xương Aurelia cho dự án của mình. Tất cả mọi thứ dường như rất trực quan, tuy nhiên tôi đang mắc kẹt với một vấn đề mà tôi nghi ngờ là khá dễ dàng (nếu bạn biết làm thế nào).

Vấn đề là app.html/app.js ban đầu đang hiển thị thanh điều hướng và tải một số kiểu mặc định.

Bây giờ tôi cần một trang đăng nhập, không tải bất cứ thứ gì ngoài phong cách riêng của nó, không có thanh điều hướng nào cả - chỉ là biểu mẫu đăng nhập của riêng nó.

Vì vậy, tôi đã cố gắng một cái gì đó như thế này:

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> 

Rõ ràng đó không làm việc (trừ khi bạn làm mới trang/f5), kể từ khi app.js/app .html là tuyến đường gốc luôn luôn hiện diện và không bao giờ thay đổi. Nhưng tôi hy vọng logic trong đánh dấu giúp minh họa những gì tôi đang tìm cách giải quyết?

Tôi đoán nếu tôi chỉ biết cách tải lại tuyến đường mẹ (app.js) khi tôi điều hướng từ tuyến đăng nhập, thành công khi đăng nhập, sang một tuyến đường khác. Và một lần nữa khi tôi đăng xuất, tuyến đường mẹ (app.js) nên được làm mới một lần nữa. Sau đó, tất cả các vấn đề của tôi sẽ được giải quyết.

Tôi thiếu gì ở đây? :-)

Answer 1

Tôi nghĩ chức năng setRoot(module) của aurelia sẽ giúp ích cho việc này.

Dưới đây là các tiêu chuẩn main.js tập tin đó "bootstraps" ứng dụng aurelia:

main.js

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

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

Khi setRoot được gọi là không có đối số Aurelia tìm kiếm một app.js + ứng dụng. viewmodel và xem html.

Chúng tôi có thể điều chỉnh logic để kiểm tra xem người dùng sẽ được đăng nhập và nếu không, hiển thị màn hình đăng nhập:

main.js

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

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

Sau đó, trong mô hình điểm đăng nhập của bạn, bạn có thể gọi setRoot('app') sau khi người dùng đã đăng nhập thành công:

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

Lưu ý: nếu ứng dụng của bạn bao gồm một "logout" tính năng sẽ gửi cho người dùng trở lại màn hình đăng nhập (ví dụ setRoot('login')), hãy chắc chắn reset the router và cập nhật các url cho phù hợp. Điều này sẽ ngăn chặn sự cố khi người dùng đăng nhập lại. Chi tiết khác trong here và here.

Answer 2

Đối với một ví dụ làm việc của setRoot bạn có thể kiểm tra cũng https://foursails.github.io/sentry https://github.com/foursails/sentry