angle2とtypescriptを使用してページを認証する方法

Question

ログインページと3ページが追加されています。今私は認証機能を行う必要があります。認証が定義されていない場合は、ログインページにリダイレクトする必要があります。認証が真であれば、checkLogin機能に移動する必要があります。私はこれを行う方法を取得していないが、私はページのいずれかでこのように試していた。

TS：

import { Router, CanActivate } from '@angular/router'; 

@Injectable() 
export class PageComponent implements CanActivate { 

    constructor(private router: Router) { } 

    canActivate() { 
     if (localStorage.getItem('authToken') == undefined) { 
     this.router.navigate(['/login']); 
     } 
     else { 
      /*Checklogin*/  
     this.ApiService 
      .checklogin() 
      .subscribe(
       user => {} 
     } 
     } 

が、私はエラーを取得：

Class 'PageComponent' incorrectly implements interface 'CanActivate'. 
    Types of property 'canActivate' are incompatible. 
    Type '() => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable<boolean> | Pr...'. 
     Type 'void' is not assignable to type 'boolean | Observable<boolean> | Promise<boolean>'. 

私は私がやっているものを知らないが正しいかどうか、誰も私にあなたが返す必要が

Answer 1

を導くことができます boolean or Observable<boolean> or Promise<boolean>からcanActivate

また、

canActivateは何か、この

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){ 
    //Your logic 
} 

例

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){ 
    if (localStorage.getItem('authToken') == undefined) { 
     return false; 
    } 
    else {  
    return new Observable<boolean>((observer)=>{ 
     this.ApiService 
     .checklogin() 
     .subscribe((res)=>{ 
      //Check user 
      if(condition){ 
       observer.next(true); 
      } 
      else{ 
      observer.next(false); 
      } 
      observer.complete(); 
     }); 
    }); 
    } 

} 

Answer 2

CanActivateルートガードboolean、ObservableまたはPromiseが返されることを期待するようにする必要があります。返された値に基づいて、ページが認証されます。

あなたの場合、おそらくこのようなことをすることができます。あなたは/あなたは/観測可能約束拒否解決checkloginの実装では

canActivate() { 
    if (localStorage.getItem('authToken') == undefined) { 
    return false; 
    } 
    else { 
     return this.ApiService.checklogin() 
     } 
    } 

。

次の記事を行くことができます： https://ryanchenkie.com/angular-authentication-using-route-guards