Góc: Thiết lập các tuyến đường tùy thuộc vào phương thức dịch vụ gọi

Question

Tôi đã thiết lập cấu hình tuyến đường qua @NgModule. Và tôi có một dịch vụ xác định những phần nào của ứng dụng sẽ được hiển thị cho người dùng tùy thuộc vào một số điều kiện nhất định. Tôi cần phải gọi dịch vụ đó và thiết lập các tuyến đường theo giá trị trả lại.

Sự cố: Cấu hình tuyến đường được thiết lập bên trong chú thích và tôi không thể biết cách gọi dịch vụ trong thiết lập như vậy.

Để cụ thể hơn ở đây là cấu hình mẫu tôi muốn nâng cao.

hiện tại của tôi thiết lập định tuyến:

const appRoutes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'first-route', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'first-route', 
     component: FirstComponent, 
     pathMatch: 'full' 
    }, 
    { 
     path: 'second-route', 
     component: SecondComponent, 
     pathMatch: 'full' 
    }, 
    ... 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(appRoutes)], 
    exports: [RouterModule] 
}) 
export class MyRoutingModule { 
} 

Các dịch vụ mà nên thay đổi thiết lập tuyến đường:

@Injectable() 
export class MyService { 
    getAccessibleRoutes(): Observable<string[]> {...} 
} 

Câu hỏi: Làm thế nào tôi có thể thực hiện cuộc gọi dịch vụ và thay đổi tuyến đường?

Lưu ý: Tôi cũng đã xem "Dynamically adding routes in Angular" và "How we can add new routes dynamically into RouterModule(@NgModule imports)" nhưng tôi chưa tìm thấy câu trả lời rõ ràng ở đó.

Answer 1

Nếu tôi hiểu chính xác vấn đề của bạn, tôi nghĩ bạn có thể cân nhắc việc sử dụng nhân viên bảo vệ tuyến đường để đạt được mục tiêu của mình. Tôi khuyên bạn nên sử dụng tính năng bảo vệ để chỉ định các điều kiện truy cập tuyến đường của bạn, thay vì thay đổi danh sách tuyến đường.

Vui lòng kiểm tra liên kết này để biết thêm thông tin về bảo vệ tuyến đường:

https://codecraft.tv/courses/angular/routing/router-guards/

Tôi hy vọng điều này sẽ giúp bạn.

import { Injectable } from '@angular/core'; 
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { YourSecurityService } from './your-security.service'; 

@Injectable() 
export class YourRouteGuardService implements CanActivate { 

    constructor(
     private router: Router, 
     private yourSecurityService: YourSecurityService) { 
    } 

    canActivate(
     route: ActivatedRouteSnapshot, 
     state: RouterStateSnapshot): boolean { 

     console.log(state.url); // HERE YOU CAN GET REQUESTED ROUTE 

     if (this.yourSecurityService.checkIfUserHaveAccess()) 
      return true; 

     this.router.navigate(['your-route-to-redirect']); 
     return false; 
    } 
} 

Tiếp theo, bạn nên áp dụng bảo vệ của bạn để định tuyến của bạn:

const appRoutes: Routes = [ 
    { 
     path: 'someroute', 
     component: RouteComponent, 
     canActivate: [YourRouteGuardService] 
    }, 
    ... 
]