Question

我正在尝试在应用程序加载之前进行REST api调用。据我所知，Angular / Typescript中没有同步REST api调用。因此，在我要使用该数据之前，我无法获取该数据。我尝试在应用程序加载之前从REST api调用获取数据的原因是，我有一些菜单项，要求我什至在获得这些菜单项之前都要检查其权限。

例如，在下面的JSON对象中，我有一个菜单项对象，该对象是通过REST api调用检索的。使用RouteGuardService，我导航到一个页面，但是在进行此操作之前，我先将其令牌中的权限与菜单项JSON对象随附的权限进行比较，以检查其访问权限。

下面的第二个JSON对象中是路由的定义。在“ canActivate”属性中，它引用RouteGuardService，该RouteGuardService处理用户是否有权访问特定菜单。

我尝试检查REST api调用的回调的权限，但是由于导航已在加载时开始，所以无法执行此操作。

JSON对象1

{
                Text: 'Users',
                Tooltip: null,
                Target: '/administration/usermanagement',
                AccessPermissions: ['sys.a'],
                Order: 3,
                CollapsedIcon: 'fa fa-user',
                ExpandedIcon: 'fa fa-user',
                Children: []
            }

JSON对象2

{
                        path: 'usermanagement',
                        component: GridUserManagementComponent,
                        data: { title: "User Management" },
                        canActivate: [RouteGuardService]
                    },

我希望发生的是，在我去检查用户是否能够访问该页面之前，将菜单项数据加载到内存中。发生的事情是进入空白的灰色屏幕，该屏幕在无法访问该页面时出现。我在检查访问时记录了加载的菜单项数据，发现尚未填充。

编辑：路由定义包含在“ app-routing.module.ts”中

export const appRoutes: Routes =
[
    {
        path: '',
        component: AppMasterLayoutComponent,
        children: [
            /* Dashboard */
            {
                path: 'dashboard',
                component: DashboardComponent,
                data: { title: "Dashboard" },
                canActivate: [RouteGuardService]
            },

            /* Administration */
            {
                path: 'administration',
                children: [
                    {
                        path: 'security',
                        component: SecurityComponent,
                        data: { title: "Security" },
                        canActivate: [RouteGuardService]
                    },
                    {
                        path: 'localization',
                        component: LocalizationComponent,
                        data: { title: "Localization" },
                        canActivate: [RouteGuardService]
                    },
                    {
                        path: 'template-management',
                        component: TemplateManagementComponent,
                        data: { title: "Template Management" },
                        canActivate: [RouteGuardService]
                    },
                    {
                        path: 'usermanagement',
                        component: GridUserManagementComponent,
                        data: { title: "User Management" },
                        canActivate: [RouteGuardService]
                    },
...

调用了检查“ route-guard.service.ts”中访问权限的方法

@Injectable()
export class RouteGuardService implements CanActivate {

    constructor(private jwtService: JwtService, private ccRestApiService: CCRestAPIService) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;

        console.log('AuthGuard canActivate called. url: ' + url);

        return this.isIdentityTokenValid(url) && this.hasAccess(url)
    }
...

如何在应用加载之前从REST api调用获取数据

0 个答案: