Перенаправление пользователя с маршрутизатором в зависимости от авторизован

Question

Я хотел бы назвать страницы через маршруты в угловом 2

В моем app.modules я impoterd RouterModule и маршрутов, его хорошо смотреть:

...

import { RouterModule, Routes } from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { LoginComponent } from './login/login.component'; 
import { DashBoardComponent} from './dashboard/dashboard.component'; 
import { NotFoundComponent } from './not-found/not-found.component'; 

Здесь я создал постоянную

const APPROUTES: Routes = [ 
    {path: 'home', component: AppComponent}, 
    {path: 'login', component: LoginComponent}, 
    {path: 'dashboard', component: DashBoardComponent}, 
    {path: '**', component: NotFoundComponent} 
]; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    DashBoardComponent 
    NotFoundComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule.forRoot(), 
    RouterModule.forRoot(APPROUTES) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 

у меня есть две страницы первоначально, йа shboard и Логин, я хочу, чтобы нагрузка первую страницу входа и afeter приборную панель страницы с одним условием, если еще ....

На странице главного «appcomponent.ts» как сделать это условие Войти и приборная панель экс

if(loggedin){ 
    // page dashboard 
}else{ 
    // page login 
} 

Answer 1

Вот 3 способа сделать то, что вы просили, из наименее предпочтительная в избранное:

Вариант 1. Настоятельно перенаправлять пользователя в AppComponent

@Component({ 
    selector: 'app-root', 
    template: `...` 
}) 
export class AppComponent { 
    constructor(authService: AuthService, router: Router) { 
    if (authService.isLoggedIn()) { 
     router.navigate(['dashboard']); 
    } 
    } 
} 

Не очень хорошо. Лучше сохранить информацию «login required» в объявлении маршрута, где он принадлежит.

Вариант 2. Используйте CanActivate охранник

Добавить CanActivate охрану всех маршрутов, которые требуют, чтобы пользователь вошел в систему:

const APPROUTES: Routes = [ 
    {path: 'home', component: AppComponent, canActivate:[LoginActivate]}, 
    {path: 'dashboard', component: DashBoardComponent, canActivate:[LoginActivate]}, 
    {path: 'login', component: LoginComponent}, 
    {path: '**', component: NotFoundComponent} 
]; 

Мой охранник называется LoginActivate.

Для этого я должен добавить охрану к модулю providers.

И тогда мне нужно его реализовать. В этом примере я буду использовать защитный кожух для перенаправления пользователя, если они не вошли в систему:

@Injectable() 
export class LoginActivate implements CanActivate { 
    constructor(private authService: AuthService, private router: Router) {} 
    canActivate(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): Observable<boolean>|Promise<boolean>|boolean { 
    if (!authService.isLoggedIn()) { 
     router.navigate(['login']); 
    } 
    return true; 
    } 
} 

Отъезд в документ о маршруте охранников, если это не имеет смысла: https://angular.io/docs/ts/latest/guide/router.html#guards

Этот вариант лучше, но не супер гибко. Что делать, если нам нужно проверить другие условия, чем «войти в систему», например, разрешения пользователя? Что делать, если нам нужно передать какой-то параметр охраннику, например имя роли «admin», «editor» ...?

Вариант 3. Используйте маршрут data свойства

Лучшим ИМХО решения для добавить некоторые метаданные в декларации маршрутов указать «этот маршрут требует, чтобы пользователь вошел в».

Мы можем использовать для этого маршрут data.Он может содержать произвольные данные, и в этом случае я выбрал включить requiresLogin флаг, который либо true или false (false будет по умолчанию, если флаг не определен):

const APPROUTES: Routes = [ 
    {path: 'home', component: AppComponent, data:{requiresLogin: true}}, 
    {path: 'dashboard', component: DashBoardComponent, data:{requiresLogin: true}} 
]; 

Теперь data свойство само по себе Безразлично» ничего не делай. Но я могу использовать его для обеспечения моей логической логики. Для этого мне понадобится защитник CanActivate.

Слишком плохо, говорите вы. Теперь мне нужно добавить 2 вещи на каждый защищаемый маршрут: метаданные и охранник ...

НО:

• Вы можете прикрепить к CanActivate охраннику маршруту верхнего уровня и он будет выполнен для всех своих детских маршрутов [ПОДТВЕРЖДАЕТСЯ]. Таким образом, вам нужно только один раз использовать охрану. Конечно, он работает только в том случае, если маршруты для защиты - все дети родительского маршрута (это не так в примере Рафаэля Моры).
• Свойство data позволяет передавать все виды параметров в охрану, например. имя конкретной роли или разрешение на проверку, количество баллов или кредитов, которые пользователь должен иметь для доступа к странице, и т. д.

С учетом этих замечаний лучше всего переименовать охранник более общий, как AccessGuard.

Я только показать кусок кода, где охранник отыскивает data прикрепленные к маршруту, как то, что вы делаете внутри охранника действительно зависит от ситуации:

@Injectable() 
export class AccessGuard implements CanActivate { 
    canActivate(route: ActivatedRouteSnapshot): Observable<boolean>|Promise<boolean>|boolean { 
    const requiresLogin = route.data.requiresLogin || false; 
    if (requiresLogin) { 
     // Check that the user is logged in... 
    } 
    } 
} 

Для приведенной выше коды будет Вы должны иметь маршрут, похожий на:

{ 
    path: 'home', 
    component: AppComponent, 
    data: { requiresLogin: true }, 
    canActivate: [ AccessGuard ] 
} 

NB. Не забудьте добавить AccessGuard в ваш модуль providers.