Угловое 2 предотвратить не аутентификации маршрут доступа пользователя и ребенка

Question

Существует структура нашего проекта:

• AppComponent
  • Nav Компонент
  • LoginComponent

После пользователь аутентифицировался с использованием формы, которая вызывает Firebase, тогда пользователь должен быть перенаправлен для части, доступной только для зарегистрированных пользователей.

• AccountComponent
  • ProfileComponent
  • FilesComponent

Как вы можете видеть, что компонент имеет два счета Чайлдс.

Я ищу надлежащим образом, чтобы предотвратить не-AUTH пользователей для доступа к защищенной области моего сайта и не знаю, если я должен назвать authService в компоненте (appComponent? AccountComponent? OnInit одного из компонентов?) ИЛИ в определении маршрутов с CanActivate или CanActivateChild?

Answer 1

Использование CanActivate Route Guard.

Предположим, что ваш маршрут после того, как пользователь получает аутентификацию является http://localhost:3000/#/dashboard

Вот как предотвратить приборной панели маршрут (связанную с AccountComponent и ее ребенка), чтобы получить доступ, если пользователь не прошел проверку подлинности.

На маршруте:

{ path: 'dashboard', 
    canActivate: [ AuthService ], 
    component: AccountComponent, 
    children: [ 
     ProfileComponent, 
     FilesComponent 
    ] 
    } 

И реализовать CanActivate от службы аутентификации:

@Injectable() 
export class AuthService implements CanActivate { 


    isAuthenticated(): boolean{ 
     // auth logic 
    } 

    canActivate(): boolean{ 
     const isAuth = this.isAuthenticated(); 
     if(!isAuth){ 
     //if not authenticated do something. e.g redirect to login page 
      this._router.navigate(['','/login']) 
     } 
     return isAuth; 
    } 
}