การใช้งานกับเราเตอร์สุดท้าย
ด้วยการเปิดตัวเราเตอร์ใหม่ทำให้สามารถป้องกันเส้นทางได้ง่ายขึ้น คุณต้องกำหนดยามซึ่งทำหน้าที่เป็นบริการและเพิ่มไปยังเส้นทาง
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
มัณฑนากรอายุการใช้งานได้เนื่องจากหากฟังก์ชันที่ส่งผ่านไปแก้ไขค่าเท็จRouterOutlet
จะไม่เรียกวิธีการเปิดใช้งานของฟังก์ชัน
เขียนบล็อกโพสต์โดยละเอียดเกี่ยวกับเรื่องนี้: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492