вернуть данные из службы

Question

У меня есть следующий код, где я создаю меню в соответствии с разрешениями, я обращаюсь к службе «this.auth.permissions», которая должна вернуть мне значение, но я не могу получить к нему доступ из приложения .menu, но если я вызываю наблюдаемое и выдаю ему консоль, если оно показывает мне данные, но мне нужны не наблюдаемые, а прямые данные, чтобы использовать их внутри функции "hasExpectedPermissions"

app.menu. js

import { AuthService } from './@auth/auth.service';

@Injectable()
export class AppMenu implements OnInit{
  permissions:any=[];
  dashboardMenu: NbMenuItem[] = [];


    constructor(private auth: AuthService){
this.auth.permissions$.subscribe(permi=>{
      console.log("permi",permi)
    })
}

  ngOnInit(){

  }

  getMenu(): Observable<NbMenuItem[]> {
    const dashboardMenu = [
      {
        title: 'Dashboard',
        icon: 'home-outline',
        link: '/',
        home: true,
        children: undefined,
      },
      {
        title: 'Users',
        icon: 'person-outline',
        link: '/users',
        data: ['create:user', 'read:user'],
        children: [
          {
            title: 'Users',
            link: '/users',
            data: ['read:user'],
          },
          {
            title: 'Create User',
            link: '/edit-user',
            data: ['create:user'],
          },
        ],

      },
    ];

    function hasExpectedPermissions(page) {
      let permissionsa = this.auth.permissions;

      for(const data of page.data) {
        console.log("data",data);
        page.enabled = permissionsa.indexOf(data) > -1 || page.enabled;
      }

      return page.enabled;
    }

    function getAllowedPages(pages) {
      return pages.filter(function (page) {
        return (page.data === undefined) || (hasExpectedPermissions(page) === true);
      }).map(page => {
        if (page.children) {
          page.children = getAllowedPages(page.children);
        }
        return page;
      });
    }

      console.log('get', getAllowedPages(dashboardMenu) );




    return of([...dashboardMenu]);
  }
}

auth.service. js

public permissions: string[];
  public permissions$ = new Observable((observer) => {
    this.auth0Client$.subscribe(client => {
      if (client.isAuthenticated()) {
        from(client.getTokenSilently()).subscribe(token => {
          this.tokenSilently$ = token;
          const decodedToken = this.helper.decodeToken(token);
          this.permissions = decodedToken.permissions;
          observer.next(decodedToken.permissions);
        });
      }
    });
  }) as Observable<string[]>;

Answer 1

Если вы получаете свои разрешения асинхронно, то вам нужно создать свое меню после того, как служба вернет разрешения - в теле subscribe.

Во-первых, я реорганизовал вашу службу, чтобы сделать цепной наблюдаемый вызов в concatMap в канале, вместо использования внутренней подписки и ненужной оболочки Observable.

auth.service.ts

permissions$ = this.auth0Client$.pipe(  
  concatMap(client => client.isAuthenticated() ? from(client.getTokenSilently()) : of(null)),
  map(token => {
    if (!token) {
      return [];
    }

    const decodedToken = this.helper.decodeToken(token);
    return decodedToken.permissions;
  })
);

Затем в вашем компоненте, вы подписываетесь на это в ngOnInit (не в конструкторе) и строите свое меню в subscribe. Я не включил создание самого меню, так как этот ответ больше о том, чтобы показать вам настройку наблюдаемых.

app-menu.component.ts

export class AppMenu implements OnInit{
  constructor(private auth: AuthService) {}

  permissions = [];

  ngOnInit(): void {
    this.auth.permissions$.subscribe(permissions => {
      this.permissions = permissions;

      this.buildMenu();
    });
  }

  private buildMenu(): void {
    // TODO: implement
  }
}

I ' Я не уверен, что такое auth0client, но если он делает что-то более сложное, чем один http-запрос, вам нужно будет отписаться от подписки.