typescript - Angular 2 - redirecționare pagină de autentificare

Apelați mai întâi șablonul de autentificare (login.component). După autentificare, se încarcă app.component.

Întrebarea mea este: este posibil acest lucru? Cum fac?

Întrebare Editată:

Deja folosesc Can Activate. Îmi pare rău, încă învăț engleza. Vreau următoarele...

bootstrap-ul a apelat prima dată app.component.

@Component({
    selector: 'my-app',
    template: `  
    		<ul class="sidebar-menu">
		        <li class="header">Painel</li>
		        <li class="treeview">
		          <a href="#"><i class="fa fa-link"></i> <span>Loja</span>
		            <span class="pull-right-container">
		              <i class="fa fa-angle-left pull-right"></i>
		            </span>
		          </a>
		          <ul class="treeview-menu">
		            <li><a routerLink="/dashboard">Dashboard</a></li>
		          </ul>
		        </li>
		        <li><a routerLink="/users"><i class="fa fa-book"></i> <span>User</span></a></li>
		    </ul>
		    <div class="content-wrapper">
		        <router-outlet></router-outlet>
		    </div>`,

})

export class AppComponent implements OnInit{}

Vreau să apelez login.component înainte de a apela app.component. Doar după ce utilizatorul se autentifică să apelez app.component.

Meniul va fi încărcat dacă login.component este o rută deoarece meniul ar fi încărcat în <router-outlet></router-outlet>.

Răspuns #1

Da; este posibil - și este descris frumos în documentul avansat Routing & Navigation, în special în secțiunea Milestone #4: Route Guards.

Trebuie să definești un CanActivate guard și apoi să protejezi ruta cu guardul:

auth-guard.service.ts

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate() {
    console.log('AuthGuard#canActivate called');
    return true;
  }
}

Apoi folosește garda pentru a proteja partea site-ului tău care necesită autentificare:

admin.routing.ts

import { AuthGuard }      from '../auth-guard.service';

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          { path: 'heroes', component: ManageHeroesComponent },
          { path: '', component: AdminDashboardComponent }
        ],
      }
    ]
  }
];

export const adminRouting: ModuleWithProviders =
    RouterModule.forChild(adminRoutes);

Răspunsul #2

folosește CanActivate poți permite utilizatorului să acceseze pagina doar dacă aceasta a fost activată în rută sau să fie redirecționat către autentificare.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CanActivateAuthGuard } from './auth.service'

import { MyComponent } from './app.component';

const routes: Routes = [
    { path: '/home', component: MyComponent , canActivate: [CanActivateAuthGuard]}]

/============/

import { CanActivate, Router } from '@angular/router';

@Injectable()
export class CanActivateAuthGuard implements CanActivate {

  constructor(private router: Router) {}
    if (this.authService.isLoggedIn()) {
        return true;
    }
    //Redirect the user before denying them access to this route
    this.router.navigate(['/login']);
    return false;
}