কৌণিক 2 - রাউটিং - পর্যবেক্ষণযোগ্য এর সাথে CanActivate কাজ করুন

Question 1

আমার কাছে একটি অথথগার্ড রয়েছে (রাউটিংয়ের জন্য ব্যবহৃত) যা CanActivate প্রয়োগ করে ।

canActivate() {
    return this.loginService.isLoggedIn();
}

আমার সমস্যাটি হ'ল ক্যানএ্যাকটিভেট-ফলাফলটি কোনও HT-get-ফলাফলের উপর নির্ভর করে - লগইনসোর্সাই একটি পর্যবেক্ষণযোগ্য ফেরত দেয় ।

isLoggedIn():Observable<boolean> {
    return this.http.get(ApiResources.LOGON).map(response => response.ok);
}

আমি কীভাবে এগুলিকে একত্রিত করতে পারি - CanActivate কে ব্যাকএন্ডের রাজ্যের উপর নির্ভর করতে পারি?

# # # # # #

সম্পাদনা: দয়া করে নোট করুন, এই প্রশ্নটি ২০১ 2016 সালের - কৌনিক / রাউটারের খুব প্রাথমিক পর্যায়ে ব্যবহার করা হয়েছে।

# # # # # #

Question 2

আপনার "@ কৌনিক / রাউটার" সর্বশেষে আপগ্রেড করা উচিত। যেমন "3.0.0-alpha.8"

AuthGuard.ts পরিবর্তন করুন

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private loginService:LoginService, private router:Router) { }

    canActivate(next:ActivatedRouteSnapshot, state:RouterStateSnapshot) {
        return this.loginService.isLoggedIn().map(e => {
            if (e) {
                return true;
            }
        }).catch(() => {
            this.router.navigate(['/login']);
            return Observable.of(false);
        });
    }   
}

আপনার যদি কোনও প্রশ্ন থাকে তবে আমাকে জিজ্ঞাসা করুন！

Question 3

কৌনিক 5 এবং আরএক্সজেএস 5.5 এর জন্য কেরি হু'র উত্তর আপডেট করা হচ্ছে যেখানে catchঅপারেটরকে হ্রাস করা হয়েছে। আপনি এখন নল সাথে catchError অপারেটর ব্যবহার করা উচিত এবং lettable অপারেটার ।

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { catchError, map} from 'rxjs/operators';
import { of } from 'rxjs/observable/of';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private loginService: LoginService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {
    return this.loginService.isLoggedIn().pipe(
      map(e => {
        if (e) {
          return true;
        } else {
          ...
        }
      }),
      catchError((err) => {
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }   

}

Question 4

canActivate () প্রত্যাশিতObservable<boolean> মান হিসাবে গ্রহণ করে । প্রহরীটি পর্যবেক্ষণযোগ্য সমাধানের জন্য অপেক্ষা করবে এবং মানটি দেখবে। যদি 'সত্য' হয় তবে এটি চেকটি পাস করবে, অন্যথায় (অন্য কোনও ডেটা বা নিক্ষিপ্ত ত্রুটি) রুটটিকে প্রত্যাখ্যান করবে।

আপনি ব্যবহার করতে পারেন .mapরুপান্তর অপারেটর Observable<Response>থেকে Observable<boolean>যেমন:

canActivate(){
    return this.http.login().map((res: Response)=>{
       if ( res.status === 200 ) return true;
       return false;
    });
}

Question 5

আমি এটি এইভাবে সম্পন্ন করেছি:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.userService.auth(() => this.router.navigate(['/user/sign-in']));}

আপনি দেখতে পাচ্ছেন যে আমি ইউজারসেবা.অথকে ফ্যালব্যাক ফাংশন প্রেরণ করছি যদি HTTP কল ব্যর্থ হয় তবে কী করবেন।

এবং ব্যবহারকারীর পরিষেবাতে আমার রয়েছে:

import 'rxjs/add/observable/of';

auth(fallback): Observable<boolean> {
return this.http.get(environment.API_URL + '/user/profile', { withCredentials: true })
  .map(() => true).catch(() => {
    fallback();
    return Observable.of(false);
  });}

Question 6

এটি আপনাকে সাহায্য করতে পারে

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { AuthState } from 'src/app/shared/state';

export const ROLE_SUPER = 'ROLE_SUPER';

@Injectable()
export class AdminGuard implements CanActivate {

 @Select(AuthState.userRole)
  private userRoles$: Observable<string[]>;

  constructor(private router: Router) {}

 /**
   * @description Checks the user role and navigate based on it
   */

 canActivate(): Observable<boolean> {
    return this.userRoles$.pipe(
      take(1),
      map(userRole => {
        console.log(userRole);
        if (!userRole) {
          return false;
        }
        if (userRole.indexOf(ROLE_SUPER) > -1) {
          return true;
        } else {
          this.router.navigate(['/login']);
        }
        return false;
      })
    );
  } // canActivate()
} // class

Question 7

CanActivate পর্যবেক্ষণযোগ্য সাথে কাজ করে তবে ক্যানএ্যাকটিভেটের মতো 2 কল করা হলে ব্যর্থ হয়: [গার্ড 1, গার্ড 2]।
এখানে যদি আপনি গার্ড 1 থেকে মিথ্যা পর্যবেক্ষণযোগ্য ফিরিয়ে দেন তবে এটি গার্ড 2 এ চেক করবে এবং গার্ড 2 সত্য হয়ে গেলে রুটে অ্যাক্সেসের অনুমতি দেবে। এটি এড়াতে, গার্ড 1 এর বুলিয়ান অবজার্ভেবলের পরিবর্তে একটি বুলিয়ান ফিরিয়ে দেওয়া উচিত।

Question 8

CanActivate () এ, আপনি একটি স্থানীয় বুলিয়ান সম্পত্তি (আপনার ক্ষেত্রে মিথ্যাতে ডিফল্ট) ফিরিয়ে দিতে পারেন।

private _canActivate: boolean = false;
canActivate() {
  return this._canActivate;
}

এবং তারপরে লগইন সার্ভিসের ফলাফলের ফলে আপনি সেই সম্পত্তিটির মানটি পরিবর্তন করতে পারেন।

//...
this.loginService.login().subscribe(success => this._canActivate = true);