अंतिम राउटर के साथ उपयोग
नए राउटर की शुरुआत के साथ मार्गों की रक्षा करना आसान हो गया। आपको एक गार्ड को परिभाषित करना होगा, जो सेवा के रूप में कार्य करता है, और इसे मार्ग में जोड़ता है।
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जहाँ आपका व्यवसाय तर्क रहता है उपयोगकर्ता में हो या ना किया गया है या नहीं जगह के लिए खड़ा है। आप इसे डीआई के साथ कंस्ट्रक्टर में आसानी से जोड़ सकते हैं।
जब उपयोगकर्ता आपकी वेबसाइट पर एक नए यूआरएल पर नेविगेट करता है, तो सक्रिय विधि को वर्तमान निर्देश के साथ बुलाया जाता है। इसमें से आप url को पकड़ सकते हैं और तय कर सकते हैं कि इसकी अनुमति है या नहीं। यदि लॉगिन पृष्ठ पर सिर्फ रीडायरेक्ट नहीं है।
एक आखिरी चीज यह काम करने के लिए बनी हुई है, इसे एक में निर्मित के बजाय हमारे मुख्य घटक को पास करना है।
@Component({
selector: 'app',
directives: [LoggedInRouterOutlet],
template: template
})
@RouteConfig(...)
export class AppComponent { }
इस समाधान के साथ इस्तेमाल नहीं किया जा सकता है @CanActive जीवनचक्र सज्जाकार के , क्योंकि यदि यह पास किया गया फ़ंक्शन झूठा हल करता है, तो सक्रिय विधि RouterOutletको नहीं बुलाया जाएगा।
इसके बारे में एक विस्तृत ब्लॉग पोस्ट भी लिखी: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492