用户如何异步保护？

Question

请帮助使用异步路由保护。

我有服务，它检查身份验证用户：

@Injectable()
export class GlobalVarsService {

    private isAgreeOk = new BehaviorSubject(false);

  constructor() { };

  getAgreeState(): Observable<boolean> {
    return this.isAgreeOk;
  };  

  setAgreeState(state): void {
    this.isAgreeOk.next(state);    
  };   
}

import { GlobalVarsService } from '../services/global-vars.service';


@Injectable()
export class AgreeGuardService implements CanActivate {

  constructor(private router: Router,
                        private globalVarsService: GlobalVarsService) { };

  canActivate() {
    this.globalVarsService.getAgreeState().subscribe(
    state => {
      if(!state) {
            this.router.navigate(['/agree']);
            return false;
      } else {
        return true;
      }      

    }); 
  }  

}

const routes: Routes = [
  {
    path: 'agree',
    children: [],
    component: AgreeComponent
  },    
  {
    path: 'question',
    children: [],
    canActivate: [AgreeGuardService],
    component: QuestionComponent
  }, 

/home/kalinin/angular2/practice/feedbacks/src/app/services/agreement-guard.service.ts(8,14）中的错误：类“AgreeGuardService”错误地实现了接口“canactivate”。属性“可以激活”的类型不兼容。类型'()=>void'不能分配给类型'(route:ActivatedRouteSnapshot，state:RouterStateSnapshot)=>boolean Observable PR...‘。“void”类型不能赋值到“布尔可观察promise”类型。

我在其他组件中也使用GlobalVarsService和他的方法。所以我不能改变他们。

Answer 1

不能返回subscribe中的任何内容，而是使用map，还需要添加return语句。

canActivate() {
  // add 'return'
  return this.globalVarsService.getAgreeState()
   // change this!
   // .subscribe(state => {
   .map(state => {
     if(!state) {
        this.router.navigate(['/agree']);
        return false;
     }
     return true;
   }); 
 }