CanActivate guard перенаправляет на / при начальной загрузке, роутер-выход не отображает

У меня есть СПА с AuthGuard. Если использование не регистрируется, страница ошибки перенаправления страницы, в противном случае перенаправляет определенные маршруты. Теперь.

  1. Пользователь не авторизован
  2. Вызов /dashboard и Authgurad перенаправляет /error?returnUrl=/dashboard
  3. Вызов пользователя /login?key=112233
  4. На странице входа подпишитесь на AuthService, создайте токен пользователя и перенаправьте /dashboard
  5. перед рендерингом /dashboard срабатывает AuthGuard и AuthGurad позволяет им, потому что все в порядке
  6. /dashboard отображается нормально
  7. Пользователь хочет перейти /claim/search page
  8. Маршрутизатор изменяет URL-адрес страницы, но router-outlet не отображает перенаправленный компонент
  9. Если окно обновления пользователя Страница браузера работает нормально, в противном случае SPA не работает

Моя проблема на шаге 8,9

мой маршрут:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    component: DashboardPageComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'claim',
    canActivate: [AuthGuard],
    children: [{
      path: 'search',
      component: ClaimSearchPageComponent,
    },
    {
      path: 'detail/:id',
      component: ClaimDetailPageComponent,
    }]
  },
  {
    path: 'login',
    component: LoginPageComponent,
  },
  {
    path: 'error',
    component: ErrorPageComponent,
  },
  {
    path: '**',
    component: ErrorPageComponent,
  }
];

страница авторизации :

ngOnInit() {
    this._returnUrl = this._route.snapshot.queryParams['returnUrl'] || '/';
    this._encryptedKey = this._route.snapshot.queryParams['key'];
    this._authenticationService.login(this._encryptedKey)
      .subscribe(
        data => {
          this._router.navigate([this._returnUrl]);
        });
  }

Служба аутентификации:

public get isLogged(): boolean {
    return !!this.currentUserSubject.value;
}
public login(encryptedKey: string) {
    return super.httpPostModel(User, environment.apiService.endPoints.user.login, { key: encryptedKey }).pipe(map(user => {
        sessionStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
        return user;
    }));
}

охрана авторизации

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this._authenticationService.isLogged) {
        return true;
    }
    this._router.navigate(['/error'], { queryParams: { returnUrl: state.url } });
    return false;
}

person OMANSAK    schedule 29.11.2019    source источник


Ответы (2)


Для безкомпонентных маршрутов (без розетки маршрутизатора) вы можете использовать canActivateChild, а не canActivate, я предлагаю вам добавить ClaimComponent только с этим содержимым.

<router-outlet></router-outlet>

и изменить маршруты на

{
 path: 'claim',
 component: ClaimComponent, // add this
 canActivate: [AuthGuard],
 children: [{
   path: 'search',
   component: ClaimSearchPageComponent,
 },
 {
   path: 'detail/:id',
   component: ClaimDetailPageComponent,
 }]
},

в случае маршрутов без компонентов canActivateChild запускается до активации любого дочернего маршрута:

{
 path: 'claim',
 canActivateChild: [AuthGuard],
 children: [{
   path: 'search',
   component: ClaimSearchPageComponent,
 },
 {
   path: 'detail/:id',
   component: ClaimDetailPageComponent,
 }]
},
person Fateh Mohamed    schedule 29.11.2019

В ваших маршрутах вам также необходимо указать свойство компонента для родительского компонента (компонента заявки).

Попробуй это :

{
    path: 'claim',
    component: ClaimPAgeComponent,
    canActivate: [AuthGuard],
    children: [{
      path: 'search',
      component: ClaimSearchPageComponent,
    },
    {
      path: 'detail/:id',
      component: ClaimDetailPageComponent,
    }]
  }
person Chinna M    schedule 29.11.2019