如何使用angular2和typescript对页面进行身份验证

Question

我有一个登录页面和另外3页。现在我需要做身份验证功能。如果身份验证未定义，则必须重定向到登录页面，如果身份验证为true，则必须转到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。根据返回的值，页面将通过身份验证。

在你的情况下，你可以做这样的事情。

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

在checklogin的实现中，你解决/拒绝你的承诺/可观察。

您可以阅读以下文章：https://ryanchenkie.com/angular-authentication-using-route-guards