Penggunaan dengan router terakhir
Dengan diperkenalkannya router baru, menjadi lebih mudah untuk menjaga rute. Anda harus menentukan penjaga, yang bertindak sebagai layanan, dan menambahkannya ke rute.
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();
}
}
Sekarang teruskan LoggedInGuard
ke rute dan tambahkan juga ke providers
larik modul.
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 },
];
Deklarasi modul:
@NgModule({
declarations: [AppComponent, HomeComponent, LoginComponent]
imports: [HttpModule, BrowserModule, RouterModule.forRoot(routes)],
providers: [UserService, LoggedInGuard],
bootstrap: [AppComponent]
})
class AppModule {}
Posting blog mendetail tentang cara kerjanya dengan rilis final: https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9
Penggunaan dengan router yang tidak digunakan lagi
Solusi yang lebih kuat adalah memperpanjang RouterOutlet
dan saat mengaktifkan rute, periksa apakah pengguna login. Dengan cara ini Anda tidak perlu menyalin dan menempelkan perintah Anda ke setiap komponen. Selain itu, pengalihan berdasarkan subkomponen bisa menyesatkan.
@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()
}
}
The UserService
singkatan tempat di mana logika bisnis Anda berada apakah pengguna masuk log atau tidak. Anda dapat menambahkannya dengan mudah dengan DI di konstruktor.
Saat pengguna menavigasi ke url baru di situs web Anda, metode pengaktifan dipanggil dengan Instruksi saat ini. Dari situ Anda dapat mengambil url dan memutuskan apakah diizinkan atau tidak. Jika tidak langsung saja ke halaman login.
Satu hal terakhir yang tersisa untuk membuatnya berfungsi, adalah meneruskannya ke komponen utama kami, bukan ke komponen bawaan.
@Component({
selector: 'app',
directives: [LoggedInRouterOutlet],
template: template
})
@RouteConfig(...)
export class AppComponent { }
Solusi ini tidak dapat digunakan dengan @CanActive
dekorator siklus hidup, karena jika fungsi yang diteruskan kepadanya menyelesaikan kesalahan, metode pengaktifan RouterOutlet
tidak akan dipanggil.
Juga menulis posting blog rinci tentang itu: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492