Я столкнулся со следующей проблемой: раздел personal, защищенный с помощью службы AuthGuard, загружается дважды, когда я перехожу к нему или обновляю браузер. Во второй раз он удаляет параметры запроса URL-адреса, если я их предоставляю. Вот моя конфигурация маршрутизатора приложений:
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 {}
и конфигурация дочернего маршрутизатора
@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 {}
Служба AuthGuard (при этом, если она возвращает только true, такое же поведение):
@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();
}
}
}
И шаблон Navbar:
<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>
Проект доступен на Github, а неисправное поведение можно проверить на https://www.codingmarks.org/personal, войдя в систему с именем пользователя/паролем - [email protected]/Test_user1$
ОБНОВЛЕНИЕ Даже если я удалю PersonalBookmarksComponent и перенесу AuthGuard в модуль PersonalBookmarks, неправильное поведение все равно будет сохраняться... Маршруты для PersonalBookmarksModule выглядят примерно так следующий:
const personalBookmarksRoutes: Routes = [
{
path: 'search',
redirectTo: '',
pathMatch: 'full'
},
{
path: '',
component: PersonalBookmarksListComponent,
canActivate: [AuthGuard],
},
{
path: 'new',
component: NewPersonalBookmarkFormComponent
},
{
path: 'bookmarks/:id',
component: PersonalBookmarkDetailComponent
}
];
ОБНОВЛЕНИЕ 2: удаление параметров запроса произошло из-за принудительного перенаправления при входе в систему с помощью Keycloak.
Неверно:
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);
});
}
Правильно:
public login(): Promise<any> {
return new Promise<any>((resolve, reject) => {
KeycloakService.auth.login()
.success(resolve)
.error(reject);
});
}
BookmarksComponent
- person Robin Dijkhof   schedule 05.09.2017