typescript - Angular 2 - omdirigera inloggningssida

Först kalla på mallens inloggning (login.component). Efter inloggning laddas app.component.

Min fråga är, är detta möjligt? Hur gör jag?

Redigerad fråga:

Jag använder redan Kan Aktivera. Förlåt, jag lär mig fortfarande engelska. Jag vill ha följande...

bootstrap anropar först 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{}

Jag vill kalla login.component innan jag kallar app.component. Först efter att användaren har loggat in, kalla app.component.

Menyn kommer att laddas om login.component är en rutt eftersom menyn skulle laddas in i <router-outlet></router-outlet>.

Svar #1

Ja; det är möjligt - och det är fint beskrivet i det avancerade dokumentet Routing & Navigation, specifikt i avsnittet Milestone #4: Route Guards.

Du behöver definiera en CanActivate-vakt och sedan skydda rutten med vakten:

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;
  }
}

Använd sedan vakten för att skydda den del av din webbplats som kräver autentisering:

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);

Svar #2

använd CanActivate du kan tillåta användaren att besöka sidan endast om den har aktiverats i rutten eller omdirigera dem till inloggning.

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;
}

Relaterade artiklar