Использование с финальным маршрутизатором
С введением нового маршрутизатора стало проще охранять маршруты. Вы должны определить охранник, который действует как служба, и добавить его в маршрут.
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();
}
}
Теперь передайте в LoggedInGuardмаршрут и также добавьте его в providersмассив модуля.
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 },
];
Объявление модуля:
@NgModule({
declarations: [AppComponent, HomeComponent, LoginComponent]
imports: [HttpModule, BrowserModule, RouterModule.forRoot(routes)],
providers: [UserService, LoggedInGuard],
bootstrap: [AppComponent]
})
class AppModule {}
Подробное сообщение в блоге о том, как это работает с финальной версией: https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9
Использование устаревшего маршрутизатора
Более надежным решением является расширение RouterOutletи при активации проверки маршрута, если пользователь вошел в систему. Таким образом, вам не нужно копировать и вставлять свою директиву в каждый компонент. Кроме того, перенаправление на основе подкомпонента может ввести в заблуждение.
@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()
}
}
Это UserServiceозначает место, где находится ваша бизнес-логика, независимо от того, вошел ли пользователь в систему или нет. Вы можете легко добавить его с помощью DI в конструкторе.
Когда пользователь переходит на новый URL-адрес на вашем веб-сайте, вызывается метод активации с текущей инструкцией. Из него вы можете получить URL-адрес и решить, разрешено это или нет. Если не просто перенаправить на страницу входа.
И последнее, что осталось сделать, чтобы он заработал, - это передать его нашему основному компоненту вместо встроенного.
@Component({
selector: 'app',
directives: [LoggedInRouterOutlet],
template: template
})
@RouteConfig(...)
export class AppComponent { }
Это решение нельзя использовать с @CanActiveдекоратором жизненного цикла, потому что, если переданная ему функция разрешает false, метод активации RouterOutletне будет вызываться.
Также написал подробный пост в блоге об этом: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492