Question

我想保护我的一些路线。

例如这样的

{
   path: 'guardedPath',
   component: GuardedComponent,
   meta: {requiresAuth: true}
  }

然后在beforeEach中，我使用警卫类中的方法

router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)) {
        if(!guard.guarded()) {} else {next()}
    }
})

我有一堂课，我从三个变量中创建了一个Observable。

import { Observable } from 'rxjs/Observable';

import 'rxjs/operators/combineLatest';

export class ConfigService {
    constructor() {}

    checkConfig() {
        let storedVar = this.store.state.storedVar;
        let savedVar = this.anotherService.getValue('string1');
        let anotherSavedVar = this.anotherService.getValue('string2');

        return Observable.combineLatest(storedVar, savedVar, anotherSavedVar);
    }
}

storedVar是true/false中的store值，savedVar和anotherSavedVar是Observables。

在那之后，在我的警卫班里，我像这样使用这种方法。我想映射来自combineLatest的值，并基于返回的值返回true或false，因此调用了beforeEach中的方法。

import 'rxjs/add/operator/map';

export class Guard {
    constructor() {}

    guarded() {
        return this.configService.checkConfig().map((data) => {
            console.log(data);
        });
    }
}

问题是地图运算符未运行。函数本身正在运行，但是data并非来自Observable。

Answer 1

Observable是惰性数据结构。您实际上需要订阅Observable才能执行任何操作。

您最有可能想要这样的东西

export class Guard {
    constructor() {}

    guarded() {
        return this.configService.checkConfig()
          .map(data => /* Do Some transform logic here */ return data)
    }
}

router.beforeEach((to, from, next) => {
    if(to.matched.some(record => record.meta.requiresAuth)) {
        // Subscribe to the result of the guard and process
        // the handler in the callback function.
        guard.guarded().subscribe(guardResult => {
          next(guardResult.allow ? undefined : {name: 'Unauthorized'});  
        })
    }
})

在rxjs中使用Vue-router防护吗？

1 个答案: