angular - Angular 5 Observable need to wait until it's comlpete
问题描述
I need to wait until the getPermissions() observable is complete before calling the checkPermissions() method. But for the life of me I can't get it...
I've tried using async/await too but that doesn't seem to work for me either?
I need to have my permissions, before I can check them, right. Thoughts?
If there's a better way, I'm all ears.
Much appreciated.
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class RoleGuardService implements CanActivate {
constructor(public auth: AuthService,public router: Router) { }
canActivate(route: ActivatedRouteSnapshot): boolean {
//This will be passed from the route config, on the data property
const expectedRole = route.data.expectedRole;
var hasPerm = this.loadAndCheckPermissions(expectedRole);
console.log('done! ' + hasPerm);
return hasPerm;
}
loadAndCheckPermissions(expectedRole) {
var hasPermission = false;
localStorage.clear();
var myPermissions = localStorage.getItem('user-permissions');
if (myPermissions === null) {
console.log("PERMISSIONS from Server!");
//You can't wait for an Observable or Promise to complete.
//You can only subscribe to it to get notified when it completes or emits an event.
this.auth.getPermissions()
.subscribe(res => {
localStorage.setItem('user-permissions', JSON.stringify(res.body));
//Check permissions now
//hasPermission = this.checkPermissions(expectedRole);
});
} else {
hasPermission = this.checkPermissions(expectedRole);
}
console.log('loadAndCheckPermissions ' + hasPermission);
return hasPermission;
}
//Check a permission here
checkPermissions(expectedRole) {
return this.auth.checkPermission(expectedRole);
}
}
解决方案
您可以在 canActivate 方法中返回一个 Observable,如下所示:
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class RoleGuardService implements CanActivate {
constructor(
public auth: AuthService,
public router: Router
) { }
canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
//This will be passed from the route config, on the data property
const expectedRole = route.data.expectedRole;
var hasPerm = this.loadAndCheckPermissions(expectedRole);
console.log('done! ' + hasPerm);
return hasPerm;
}
loadAndCheckPermissions(expectedRole): Observable<boolean> {
var hasPermission: Observable<boolean> = Observable.of(false);
//clear
localStorage.clear();
//getter
var myPermissions = localStorage.getItem('user-permissions');
//
if (myPermissions === null) {
console.log("PERMISSIONS from Server!");
hasPermission = this.auth.getPermissions()
.map(res => {
localStorage.setItem('user-permissions', JSON.stringify(res.body));
console.log('return from async');
// Check permissions RETURNING A BOOLEAN
return this.checkPermissions(expectedRole);
});
}
else {
hasPermission = Obsersable.of(this.checkPermissions(expectedRole));
}
// console.log('loadAndCheckPermissions ' + hasPermission);
return hasPermission;
}
//Check a permission here
checkPermissions(expectedRole) {
return this.auth.checkPermission(expectedRole);
}
}
根据 Angular 的文档,路由守卫可以返回 Observable 或 Promise,路由器将等待 observable 解析为 true 或 false。
推荐阅读
- python - 合并多个工作簿和工作表时出错
- javascript - 无法在反应中正确洗牌
- c# - (私有静态引用与私有引用)性能
- python - 如何从 Python 连接 GCP Composer Airflow 的元数据数据库?
- java - 如何使用 Java 从多台计算机查询远程云数据库?
- javascript - 允许在 react-select 中创建重复值
- arrays - Matlab上矩阵展开的逆过程
- git - 如何设置相对于 Doxyfile 的 INPUT?
- spring - 尝试创建 Spring Boot Netflix eureka 服务器时出错
- c++ - 传递一个 std::shared_ptr
到一个接受 std::shared_ptr 的函数 ?