tải đường con lười biếng-nạp hai lần trong góc

Question

Tôi đang phải đối mặt với các vấn đề sau: cá nhân phần được bảo vệ thông qua một AuthGuard Dịch vụ được nạp hai lần khi tôi tìm đến nó hoặc bằng cách refresh trình duyệt. Lần thứ hai nó loại bỏ các tham số truy vấn của URL nếu tôi cung cấp bất kỳ thông tin nào. Dưới đây là cấu hình ứng dụng router của tôi:

const routes: Routes = [ 
    { 
    path: 'search', 
    redirectTo: '', 
    pathMatch: 'full' 
    }, 
    { 
    path: '', 
    component: BookmarksComponent 
    }, 
    { 
    path: 'tagged/:tag', 
    component: TagComponent 
    }, 
    { 
    path: 'about', 
    component: AboutComponent 
    }, 
    { 
    path: 'personal', 
    loadChildren: 'app/personal/personal-bookmarks.module#PersonalBookmarksModule' 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule {} 

và cấu hình router con

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { 
     path: '', 
     component: PersonalBookmarksComponent, 
     canActivate: [AuthGuard], 
     children: [ 
     { 
      path: '', 
      component: PersonalBookmarksListComponent 
     }, 
     { 
      path: 'new', 
      component: NewPersonalBookmarkFormComponent 
     }, 
     { 
      path: 'bookmarks/:id', 
      component: PersonalBookmarkDetailComponent 
     } 
     ] 
    } 

    ])], 
    exports: [RouterModule] 
}) 
export class PersonalBookmarksRoutingModule {} 

Dịch vụ AuthGuard (theo đó nếu nó chỉ trả về true là hành vi tương tự):

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private keycloakService: KeycloakService) {} 

    canActivate() { 
    console.log('AuthGuard#canActivate called'); 

    if (this.keycloakService.isLoggedIn()) { 
     return true; 
    } else { 
     this.keycloakService.login(); 
    } 
    } 
} 

Và mẫu thanh điều hướng:

<nav class="navbar navbar-light bg-faded" id="navbar"> 
    <a class="navbar-brand" [routerLink]="['']" routerLinkActive="active"> 
    <img src="assets/logo.png" width="35" height="35" class="d-inline-block align-top" alt=""> 
    Public Bookmarks 
    </a> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item"> 
     <a class="nav-link" [routerLink]="['personal']" routerLinkActive="active">Personal list</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" [routerLink]="['about']" routerLinkActive="active">About</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="http://www.codingpedia.org/tags/#codingmarks" target="_blank">Blog</a> 
    </li> 
    <li *ngIf="isLoggedIn else notLoggedIn" class="nav-item"> 
     <a class="nav-link" (click)="logout()">Logout <i class="fa fa-lock"></i></a> 
    </li> 
    <ng-template #notLoggedIn> 
     <li *ngIf="!keycloakService.isLoggedIn()" class="nav-item"> 
     <a class="nav-link" (click)="login()">Login <i class="fa fa-unlock"></i></a> 
     </li> 
    </ng-template> 
    </ul> 
</nav> 

.210

Dự án có sẵn on Github và hành vi bị lỗi có thể được kiểm tra tại https://www.codingmarks.org/personal bằng cách đăng nhập với username/pwd - test@codingmarks.org/Test_user1$

CẬP NHẬT Thậm chí nếu tôi loại bỏ PersonalBookmarksComponent và di chuyển AuthGuard đến PersonalBookmarks mô-đun hành vi sai vẫn tồn tại ... các tuyến đường cho PersonalBookmarksModule trông giống như sau:

const personalBookmarksRoutes: Routes = [ 
    { 
     path: 'search', 
     redirectTo: '', 
     pathMatch: 'full' 
    }, 
    { 
     path: '', 
     component: PersonalBookmarksListComponent, 
     canActivate: [AuthGuard], 
    }, 
    { 
     path: 'new', 
     component: NewPersonalBookmarkFormComponent 
    }, 
    { 
     path: 'bookmarks/:id', 
     component: PersonalBookmarkDetailComponent 
    } 

]; 

UPDATE2: Việc loại bỏ các tham số truy vấn là do chuyển hướng bắt buộc khi đăng nhập bằng Keycloak.

False:

public login(): Promise<any> { 
    let options: any; 
    options = {redirectUri: environment.HOST + 'personal'}; 
    return new Promise<any>((resolve, reject) => { 
    KeycloakService.auth.login(options) 
     .success(resolve) 
     .error(reject); 
    }); 
} 

Đúng:

public login(): Promise<any> { 
    return new Promise<any>((resolve, reject) => { 
    KeycloakService.auth.login() 
     .success(resolve) 
     .error(reject); 
    }); 
} 

Answer 1

Lý do các tuyến đường đang được nạp hai lần là bởi vì bạn đã xác định con đường định tuyến để nạp hai thành phần khi bạn đi đến điều hướng đến tuyến đường này ' '.

thay đổi cấu hình router để

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { 
     path: '', 
     //component: PersonalBookmarksComponent, //either remove this component line completely [best way is to remove this component deceleration] 
     canActivate: [AuthGuard], 
     children: [ 
     { 
      path: '', // or specify a different route to this better use a redirect option on path 
      component: PersonalBookmarksListComponent 
     }, 
     { 
      path: 'new', 
      component: NewPersonalBookmarkFormComponent 
     }, 
     { 
      path: 'bookmarks/:id', 
      component: PersonalBookmarkDetailComponent 
     } 
     ] 
    } 

    ])], 
    exports: [RouterModule] 
}) 

Answer 2

U có thể thực hiện theo hai bước sau:

1. Di chuyển authGuard để module định tuyến cá nhân, nó cũng sẽ cải thiện hiệu suất của bạn như các mô-đun sẽ không được tải trong trường hợp người dùng không được xác thực.
2. Xóa thành phần "PersonalBookmarksComponent" chứa ổ cắm bộ định tuyến trống, thay vào đó cung cấp trực tiếp bộ định tuyến cho các thành phần còn lại của chúng tôi.

Tôi tin rằng cách tiếp cận này sẽ giải quyết được vấn đề của bạn.

Nhân viên bảo vệ được gọi hai lần một lần cho thành phần của bạn và một lần cho thành phần con bạn.