Redirect người dùng với bộ định tuyến tùy thuộc vào tình trạng đăng nhập

Question

Tôi muốn gọi trang qua đường ở góc 2

Trong app.modules tôi impoterd RouterModule và đường bay, nhìn ok của nó:

...

import { RouterModule, Routes } from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { LoginComponent } from './login/login.component'; 
import { DashBoardComponent} from './dashboard/dashboard.component'; 
import { NotFoundComponent } from './not-found/not-found.component'; 

Ở đây, tôi tạo ra một hằng số

const APPROUTES: Routes = [ 
    {path: 'home', component: AppComponent}, 
    {path: 'login', component: LoginComponent}, 
    {path: 'dashboard', component: DashBoardComponent}, 
    {path: '**', component: NotFoundComponent} 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    DashBoardComponent 
    NotFoundComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule.forRoot(), 
    RouterModule.forRoot(APPROUTES) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 

tôi có hai trang ban đầu, da shboard và đăng nhập, tôi muốn điều đó tải trang đầu tiên đăng nhập và afeter trang bảng điều khiển với một điều kiện nếu khác ....

Trong trang chính "appcomponent.ts" làm thế nào để làm điều này là điều kiện đăng nhập và bảng điều khiển cũ

if(loggedin){ 
    // page dashboard 
}else{ 
    // page login 
} 

Answer 1

Dưới đây là 3 cách để làm những gì bạn yêu cầu, từ ít ưa thích để yêu thích:

Lựa chọn 1. phải nhất thiết chuyển hướng người dùng trong AppComponent

@Component({ 
    selector: 'app-root', 
    template: `...` 
}) 
export class AppComponent { 
    constructor(authService: AuthService, router: Router) { 
    if (authService.isLoggedIn()) { 
     router.navigate(['dashboard']); 
    } 
    } 
} 

Không tốt lắm. Tốt hơn là giữ thông tin "yêu cầu đăng nhập" trong khai báo tuyến đường nơi nó thuộc về.

Lựa chọn 2. Sử dụng một người bảo vệ CanActivate

Thêm một người bảo vệ CanActivate cho tất cả các tuyến đường mà yêu cầu người dùng phải đăng nhập:

const APPROUTES: Routes = [ 
    {path: 'home', component: AppComponent, canActivate:[LoginActivate]}, 
    {path: 'dashboard', component: DashBoardComponent, canActivate:[LoginActivate]}, 
    {path: 'login', component: LoginComponent}, 
    {path: '**', component: NotFoundComponent} 
]; 

bảo vệ tôi được gọi là LoginActivate.

Để thiết bị hoạt động, tôi phải thêm bộ bảo vệ vào mô-đun providers của mô-đun.

Và sau đó tôi cần triển khai. Trong ví dụ này, tôi sẽ sử dụng bảo vệ để chuyển hướng người dùng nếu họ không đăng nhập:

@Injectable() 
export class LoginActivate implements CanActivate { 
    constructor(private authService: AuthService, private router: Router) {} 
    canActivate(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): Observable<boolean>|Promise<boolean>|boolean { 
    if (!authService.isLoggedIn()) { 
     router.navigate(['login']); 
    } 
    return true; 
    } 
} 

Kiểm tra các doc về bảo vệ tuyến đường nếu điều này không có ý nghĩa: https://angular.io/docs/ts/latest/guide/router.html#guards

Tùy chọn này là tốt hơn nhưng không siêu linh hoạt. Điều gì xảy ra nếu chúng ta cần kiểm tra các điều kiện khác hơn là "đăng nhập" như quyền người dùng? Điều gì sẽ xảy ra nếu chúng ta cần truyền một số tham số cho người bảo vệ, như tên của một vai trò "admin", "editor" ...?

Tùy chọn 3. Sử dụng các tuyến đường data tài sản

Các IMHO giải pháp tốt nhất là để thêm một số siêu dữ liệu trong việc kê khai các tuyến đường để chỉ "tuyến đường này yêu cầu người dùng đăng nhập".

Chúng tôi có thể sử dụng tuyến đường data thuộc tính cho điều đó.Nó có thể chứa dữ liệu tùy ý và trong trường hợp này tôi đã chọn để bao gồm một lá cờ requiresLogin đó là một trong hai true hoặc false (false sẽ là mặc định nếu cờ không được định nghĩa):

const APPROUTES: Routes = [ 
    {path: 'home', component: AppComponent, data:{requiresLogin: true}}, 
    {path: 'dashboard', component: DashBoardComponent, data:{requiresLogin: true}} 
]; 

Bây giờ data tài sản của riêng mình doesn' t làm bất cứ điều gì. Nhưng tôi có thể sử dụng nó để thực thi logic "yêu cầu đăng nhập" của tôi. Tôi cần bảo vệ CanActivate.

Quá tệ, bạn nói. Bây giờ tôi cần phải thêm 2 điều cần mỗi con đường bảo vệ: metadata VÀ bảo vệ ...

NHƯNG:

• Bạn có thể đính kèm các CanActivate bảo vệ để một tuyến đường cấp cao nhất và nó sẽ được thực thi cho tất cả các tuyến con của nó [ĐƯỢC XÁC NHẬN]. Bằng cách đó bạn chỉ cần sử dụng bảo vệ một lần. Tất nhiên, nó chỉ hoạt động nếu các tuyến đường để bảo vệ là tất cả trẻ em của một tuyến đường mẹ (đó không phải là trường hợp trong ví dụ của Rafael Moura).
• Thuộc tính data cho phép chúng tôi chuyển tất cả các loại thông số cho bảo vệ, ví dụ: tên của vai trò hoặc quyền cụ thể để kiểm tra, một số điểm hoặc tín dụng mà người dùng cần phải sở hữu để truy cập trang, v.v.

Hãy xem xét những lưu ý này, tốt nhất là đổi tên bảo vệ thành thứ gì đó tổng quát hơn như AccessGuard.

tôi sẽ chỉ hiển thị các đoạn mã mà bảo vệ lấy data gắn liền với các tuyến đường, như những gì bạn làm bên trong bảo vệ thực sự phụ thuộc vào tình hình của bạn:

@Injectable() 
export class AccessGuard implements CanActivate { 
    canActivate(route: ActivatedRouteSnapshot): Observable<boolean>|Promise<boolean>|boolean { 
    const requiresLogin = route.data.requiresLogin || false; 
    if (requiresLogin) { 
     // Check that the user is logged in... 
    } 
    } 
} 

Đối với các mã trên là được thực hiện, bạn cần phải có một tuyến đường tương tự như:

{ 
    path: 'home', 
    component: AppComponent, 
    data: { requiresLogin: true }, 
    canActivate: [ AccessGuard ] 
} 

NB. Đừng quên thêm AccessGuard vào mô-đun của bạn providers.