চূড়ান্ত রাউটার ব্যবহার
নতুন রাউটারের প্রবর্তনের সাথে সাথে রুটগুলি রক্ষা করা আরও সহজ হয়ে গেছে। আপনাকে অবশ্যই একজন গার্ডকে সংজ্ঞায়িত করতে হবে, যা একটি পরিষেবা হিসাবে কাজ করে এবং এটিকে রুটে যুক্ত করতে হবে।
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