用户如何异步守卫？答案

【问题标题】：How user async guard?用户如何异步守卫？
【发布时间】：2018-04-06 23:33:48
【问题描述】：

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

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

@Injectable()
export class GlobalVarsService {

    private isAgreeOk = new BehaviorSubject(false);

  constructor() { };

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

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

如果 getAgreeState() 返回真值，则用户已通过身份验证。

我的守护服务：

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/feedback/src/app/services/agree-guard.service.ts (8,14)：“AgreeGuardService”类错误地实现了接口 '可以激活'。属性“canActivate”的类型不兼容。类型 '() => void' 不可分配给类型 '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | 可观察 |公...'。类型 'void' 不能分配给类型 'boolean |可观察 |承诺”。

GlobalVarsService 和他的方法我也在其他组件中使用。因此我无法更改它们。

【问题讨论】：

标签： javascript angular typescript

【解决方案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;
   }); 
 }

【讨论】：