Uso com o roteador final
Com a introdução do novo roteador, ficou mais fácil proteger as rotas. Você deve definir um guarda, que atua como um serviço, e adicioná-lo à rota.
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { UserService } from '../../auth';
@Injectable()
export class LoggedInGuard implements CanActivate {
constructor(user: UserService) {
this._user = user;
}
canActivate() {
return this._user.isLoggedIn();
}
}
Agora passe o LoggedInGuardpara a rota e também adicione-o à providersmatriz do módulo.
import { LoginComponent } from './components/login.component';
import { HomeComponent } from './components/home.component';
import { LoggedInGuard } from './guards/loggedin.guard';
const routes = [
{ path: '', component: HomeComponent, canActivate: [LoggedInGuard] },
{ path: 'login', component: LoginComponent },
];
A declaração do módulo:
@NgModule({
declarations: [AppComponent, HomeComponent, LoginComponent]
imports: [HttpModule, BrowserModule, RouterModule.forRoot(routes)],
providers: [UserService, LoggedInGuard],
bootstrap: [AppComponent]
})
class AppModule {}
Postagem detalhada no blog sobre como funciona com a versão final: https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9
Uso com o roteador obsoleto
Uma solução mais robusta é estender RouterOutlete ao ativar uma rota, verificar se o usuário está conectado. Dessa forma, você não precisa copiar e colar sua diretiva em todos os componentes. Além disso, o redirecionamento com base em um subcomponente pode ser enganoso.
@Directive({
selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
publicRoutes: Array;
private parentRouter: Router;
private userService: UserService;
constructor(
_elementRef: ElementRef, _loader: DynamicComponentLoader,
_parentRouter: Router, @Attribute('name') nameAttr: string,
userService: UserService
) {
super(_elementRef, _loader, _parentRouter, nameAttr);
this.parentRouter = _parentRouter;
this.userService = userService;
this.publicRoutes = [
'', 'login', 'signup'
];
}
activate(instruction: ComponentInstruction) {
if (this._canActivate(instruction.urlPath)) {
return super.activate(instruction);
}
this.parentRouter.navigate(['Login']);
}
_canActivate(url) {
return this.publicRoutes.indexOf(url) !== -1 || this.userService.isLoggedIn()
}
}
A UserServicerepresenta o lugar onde sua lógica de negócios reside se o usuário está logado ou não. Você pode adicioná-lo facilmente com DI no construtor.
Quando o usuário navega para um novo URL no seu site, o método de ativação é chamado com a Instrução atual. A partir dele, você pode pegar o URL e decidir se é permitido ou não. Se não, basta redirecionar para a página de login.
Uma última coisa que resta para fazê-lo funcionar é repassá-lo ao nosso componente principal, em vez do componente interno.
@Component({
selector: 'app',
directives: [LoggedInRouterOutlet],
template: template
})
@RouteConfig(...)
export class AppComponent { }
Esta solução não pode ser usada com o @CanActivedecorador do ciclo de vida, porque se a função passada para ele resolver falsa, o método de ativação do RouterOutletnão será chamado.
Também escreveu uma postagem detalhada no blog: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492