Seeking assistance with implementing async route guard.
I have a service that handles user authentication:
@Injectable()
export class GlobalVarsService {
private isAgreeOk = new BehaviorSubject(false);
constructor() { };
getAgreeState(): Observable<boolean> {
return this.isAgreeOk;
};
setAgreeState(state): void {
this.isAgreeOk.next(state);
};
}
If the method getAgreeState() returns true, then the user is authenticated.
Here is my guard service:
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;
}
});
}
}
These are my routes:
const routes: Routes = [
{
path: 'agree',
children: [],
component: AgreeComponent
},
{
path: 'question',
children: [],
canActivate: [AgreeGuardService],
component: QuestionComponent
},
However, I encountered the following error message in the console:
ERROR in /home/kalinin/angular2/PRACTICE/feedback/src/app/services/agree-guard.service.ts (8,14): Class 'AgreeGuardService' incorrectly implements interface 'CanActivate'. Types of property 'canActivate' are incompatible. Type '() => void' is not assignable to type '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean | Observable | Pr...'. Type 'void' is not assignable to type 'boolean | Observable | Promise'.
Since GlobalVarsService and its methods are also used in other components, modifying them is not an option for me.