2016-05-08 33 views
9

Tôi hiện đang có một ứng dụng Angular 2 hoạt động như sau:Chiến lược mẫu tốt để xác thực trong Angular 2

App.component được khởi động khi truy cập trang web. Mẫu cho App.component có tất cả các thẻ thành phần (ví dụ: menu.component, search.component và bộ định tuyến).

Những gì tôi về cơ bản cần là như sau: hiện tại khách truy cập được chuyển hướng trực tiếp đến trang Đăng nhập vì người dùng cần đăng nhập. Anh ấy vẫn có thể xem menu và tất cả các thành phần chỉ có cho người dùng đã đăng nhập. Chiến lược nào tốt nhất để thêm lớp mẫu bổ sung, vì vậy người dùng không đăng nhập sẽ được chuyển hướng?

Trả lời

5

Cách mà tôi đã làm là sử dụng lệnh * ngIf để "ẩn" các phần tử đó cho đến khi người dùng được xác thực. Tôi sử dụng dấu ngoặc kép xung quanh từ ẩn ở trên vì góc không thực sự ẩn phần đó của mẫu, nó thực sự không hiển thị nó ở tất cả để nó không có trong DOM.

Điều đó có nghĩa là trừ khi người dùng đăng nhập, chỉ màn hình đăng nhập của bạn mới được hiển thị.

tin chi tiết về * ngIf có thể được tìm thấy ở đây:

https://angular.io/docs/ts/latest/guide/structural-directives.html#!#ngIf

cũ.

@Component({ 
    selector: 'your-selector', 
    template: ` 
     <div *ngIf='isLoggedIn() === true'> 
      <menu-component></menu-component> 
      <search-component></search-component> 
      <router-outlet></router-outlet> 
     </div> 
     <div *ngIf='isLoggedIn() !== true'> 
      <login-component></login-component> 
     </div> 
    ` 
    ... 
}) 
export class YourSelectorComponent { 
    isLoggedIn() { 
     //check if logged in 
    } 
} 
Các vấn đề liên quan