0

我正在使用警卫来检查用户是否有足够的权限来访问我的 Angular 应用程序中的页面。它对 api 进行异步调用以获取该信息。它在大多数情况下都能正常工作。我正在使用 Chrome 进行一些性能测试，以优化移动设备上的应用程序行为，并且在慢速 3G 节流中进行测试时，警卫发出的呼叫似乎在大约 445 毫秒后自动取消

以下是代码的相关部分：

身份验证服务

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Authorization } from '@models';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class AuthService {
    constructor(private http: HttpClient) {}

    getAuthorizations(id: number): Observable<Authorizations> {
        return this.http
            .get(`/api/authorizations`)
            .pipe(
                map(res => {
                    return !!res && (<any>res).data.authorizedActions
                        ? (<any>res).data.authorizedActions
                        : null;
                })
            );
    }
}

应用程序模块

export const appRoutes: Routes = [
            {
                path: '',
                component: HomeComponent,
            },
            {
                path: 'budget',
                canActivate: [BudgetGuard],
                loadChildren: () => import('./budget').then(m => m.BudgetModule),
            },
];

预算卫士

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
import { AuthorizedBusinessAction } from '@tproj/models';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AuthService } from '../auth.service';
import { of } from 'rxjs';

@Injectable()
export class BudgetGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
        const userId = route.params.userId;
        return this.authService
            .getAuthorizations(userId)
            .pipe(map(auth => {
                if (auth.userIsAuthorized) {
                   return auth.userIsAuthorized;
                }
                this.router.navigate([`/`]);
            }));
    }
}

欢迎任何线索，谢谢

4

1 回答 1

0

我建议，您不要在警卫内部进行 api 调用，而是在根应用程序加载后进行 API 调用，并将用户对象保存在 observable 中，并且在 BudgetGuard 中，您可以订阅它。

预算卫士：

    constructor(private _authService: AuthService) {
        this._authService.currentUser.subscribe(u => {
            this.authorized = u != undefined ? true : false
        })
    }
    canActivate() {return this.authorized}

在 auth.service 中，您可以执行以下操作：

getUser() { this.currentUser.next(user)}

您也可以查看角度拦截器。

于 2019-09-05T13:01:24.457 回答