Использование Vue-роутера с rxjs?

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

У меня есть класс, где я креатин, наблюдаемый из трех переменных.

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