Cách sử dụng với bộ định tuyến cuối cùng
Với sự ra đời của bộ định tuyến mới, việc bảo vệ các tuyến đường trở nên dễ dàng hơn. Bạn phải xác định một người bảo vệ, hoạt động như một dịch vụ và thêm nó vào tuyến đường.
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();
}
}
Bây giờ chuyển LoggedInGuardtới tuyến đường và cũng thêm nó vào providersmảng của mô-đun.
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 },
];
Khai báo mô-đun:
@NgModule({
declarations: [AppComponent, HomeComponent, LoginComponent]
imports: [HttpModule, BrowserModule, RouterModule.forRoot(routes)],
providers: [UserService, LoggedInGuard],
bootstrap: [AppComponent]
})
class AppModule {}
Bài đăng trên blog chi tiết về cách nó hoạt động với bản phát hành cuối cùng: https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9
Cách sử dụng với bộ định tuyến không dùng nữa
Một giải pháp mạnh mẽ hơn là mở rộng RouterOutletvà khi kích hoạt kiểm tra tuyến đường nếu người dùng đã đăng nhập. Bằng cách này, bạn không phải sao chép và dán chỉ thị của mình vào mọi thành phần. Cộng với việc chuyển hướng dựa trên một thành phần con có thể gây hiểu nhầm.
@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()
}
}
Các UserService tắt của nơi chứa logic nghiệp vụ của bạn cho dù người dùng có đăng nhập hay không. Bạn có thể thêm nó một cách dễ dàng với DI trong hàm tạo.
Khi người dùng điều hướng đến một url mới trên trang web của bạn, phương pháp kích hoạt được gọi với Hướng dẫn hiện tại. Từ đó, bạn có thể lấy url và quyết định xem nó có được phép hay không. Nếu không chỉ chuyển hướng đến trang đăng nhập.
Một điều cuối cùng còn lại để làm cho nó hoạt động, là chuyển nó đến thành phần chính của chúng ta thay vì được tích hợp sẵn.
@Component({
selector: 'app',
directives: [LoggedInRouterOutlet],
template: template
})
@RouteConfig(...)
export class AppComponent { }
Không thể sử dụng giải pháp này với @CanActivetrình trang trí vòng đời, bởi vì nếu hàm được truyền cho nó giải quyết sai, thì phương thức kích hoạt của hàm RouterOutletsẽ không được gọi.
Cũng đã viết một bài đăng blog chi tiết về nó: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492