Question

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

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

@Injectable()
export class GlobalVarsService {

    private isAgreeOk = new BehaviorSubject(false);

  constructor() { };

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

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

如果getAgreeState（）返回true值，则对用户进行身份验证。

我的警卫服务：

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'。属性'canActivate'的类型是不兼容的。输入'（）=＆gt; void'不能分配给''（route：ActivatedRouteSnapshot，state：RouterStateSnapshot）=＆gt;布尔值| 可观察的|公关......“。类型'void'不能赋值为'boolean |可观察的|许”。

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;
   }); 
 }

用户异步防护如何？

1 个答案: