fix: routes permissions problem

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html

@@ -1,4 +1,4 @@
-<ul class="navbar-nav">
+<ul class="navbar-nav" *ngIf="isShow">
   <ng-container
     *ngFor="let route of routes.visible$ | async; trackBy: trackByFn"
     [ngTemplateOutlet]="route?.children?.length ? dropdownLink : defaultLink"
@@ -18,7 +18,7 @@
   <ng-template #dropdownLink let-route>
     <li
       #navbarRootDropdown
-      *ngIf="findRequiredPolicy(route)"
+      [abpVisibility]="routeContainer"
       [abpPermission]="route.requiredPolicy"
       class="nav-item dropdown"
       display="static"
@@ -74,7 +74,8 @@
       #dropdownSubmenu="ngbDropdown"
       placement="right-top"
       [autoClose]="true"
-      *abpPermission="child.requiredPolicy"
+      [abpPermission]="child.requiredPolicy"
+      [abpVisibility]="childrenContainer"
     >
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
         <a

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts

@@ -1,45 +1,29 @@
-import { ABP, RoutesService, TreeNode, LocalizationService, ConfigState } from '@abp/ng.core';
-import { Component, Input, TrackByFunction } from '@angular/core';
+import { ABP, ConfigState, RoutesService, takeUntilDestroy, TreeNode } from '@abp/ng.core';
+import { Component, Input, OnDestroy, TrackByFunction } from '@angular/core';
 import { Store } from '@ngxs/store';
+import compare from 'just-compare';
+import { distinctUntilChanged, skip } from 'rxjs/operators';
 
 @Component({
   selector: 'abp-routes',
   templateUrl: 'routes.component.html',
 })
-export class RoutesComponent {
+export class RoutesComponent implements OnDestroy {
   @Input() smallScreen: boolean;
 
-  trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
-
-  constructor(public readonly routes: RoutesService, private store: Store) {}
-
-  findRequiredPolicy(route: TreeNode<ABP.Route>): boolean {
-    if (route.requiredPolicy || !route.children?.length) return true;
+  isShow = true;
 
-    const policies = getPolicies(route.children);
-
-    let isVisible = true;
-    for (let i = 0; i < policies.length; i++) {
-      if (!this.store.selectSnapshot(ConfigState.getGrantedPolicy(policies[i]))) {
-        isVisible = false;
-        break;
-      }
-    }
+  trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
 
-    return isVisible;
+  constructor(public readonly routes: RoutesService, private store: Store) {
+    this.store
+      .select(ConfigState.getDeep('auth.grantedPolicies'))
+      .pipe(distinctUntilChanged(compare), skip(1), takeUntilDestroy(this))
+      .subscribe(() => {
+        this.isShow = false;
+        setTimeout(() => (this.isShow = true), 0);
+      });
   }
-}
-
-function getPolicies(routes: TreeNode<ABP.Route>[]): string[] {
-  return routes.reduce((acc, val) => {
-    if (val.requiredPolicy) acc.push(val.requiredPolicy);
-
-    if (val.children?.length) {
-      const childPolicies = getPolicies(val.children);
-
-      if (childPolicies?.length) acc.push(...childPolicies);
-    }
 
-    return acc;
-  }, []);
+  ngOnDestroy() {}
 }