-1

我有一个路由守卫，可以在继续之前检查用户是否可以访问资源。订阅后，我检查用户是否有权访问，如果没有，则使用重定向parseUrl或返回true。

@Injectable({ providedIn: 'root' })
export class PortfolioGuard implements CanActivate {
  constructor(private resourceAccessService: ResourceAccessService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean | UrlTree {
    const id = +route.paramMap.get('id');
    // return this.resourceAccessService.checkUserAccessToPortfolio(id);
    this.resourceAccessService.checkUserAccessToPortfolio(id).subscribe((hasAccess) => {
      if (!hasAccess) {
        console.log('No access');
        return this.router.parseUrl('/');
      } else {
        console.log('access');
        return true;
      }
    });
  }
}

如果我只返回支票，这有效，但我也希望它根据该支票重定向。

@Injectable({ providedIn: 'root' })
export class PortfolioGuard implements CanActivate {
  constructor(private resourceAccessService: ResourceAccessService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const id = +route.paramMap.get('id');
    return this.resourceAccessService.checkUserAccessToPortfolio(id);
  }
}

我在第一块代码中遗漏了什么，我应该从服务中解决订阅...

checkUserAccessToPortfolio(id: number): Observable<boolean>  {
    const url = this.baseUrl + this.userResourceAccessUrl + '/' + + id + '/portfolio';
    return this.http.get<boolean>(url);
  }
4

2 回答 2

0

我会尝试在函数中返回 Observable：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean | UrlTree {
  const id = +route.paramMap.get('id');
    
  return this.resourceAccessService.checkUserAccessToPortfolio(id).pipe(
    map(hasAccess => {
      if (!hasAccess) {
        console.log('No access');
        this.router.parseUrl('/');
        return false
      } else {
        console.log('access');
        return true;
      }
    })
  )
}
于 2021-10-13T07:19:38.453 回答
0

这个问题非常明显。您没有在函数中返回任何内容。

解决方案：

  1. 将返回添加到您的函数canActivate
  2. 删除订阅并将所有逻辑移动到地图运算符。或者您可以使用tap,switchMap运算符。这取决于您的上下文。

而不是这样做：

@Injectable({ providedIn: 'root' })
export class PortfolioGuard implements CanActivate {
  constructor(private resourceAccessService: ResourceAccessService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean | UrlTree {
    const id = +route.paramMap.get('id');
    // return this.resourceAccessService.checkUserAccessToPortfolio(id);
    this.resourceAccessService.checkUserAccessToPortfolio(id).subscribe((hasAccess) => {
      if (!hasAccess) {
        console.log('No access');
        return this.router.parseUrl('/');
      } else {
        console.log('access');
        return true;
      }
    });
  }
}

您可以尝试使用pipeandmap运算符。

@Injectable({ providedIn: 'root' })
export class PortfolioGuard implements CanActivate {
  constructor(private resourceAccessService: ResourceAccessService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean | UrlTree {
    const id = +route.paramMap.get('id');
    return this.resourceAccessService.checkUserAccessToPortfolio(id).pipe( map( hasAccess => {
      if(!hasAccess) {
        console.log('No access');
        this.router.parseUrl('/');
        return false
      } else {
        console.log('access');
        return true;
      }
    });
  }
}
于 2021-10-13T08:49:59.040 回答