Question

我试图在服务中构建一个方法，检查是否应该根据他的权限向当前用户显示导航按钮（这只是整容＆＃34;安全＆＃34;我知道）。因此，这是放置在模板中的按钮

<button [routerLink]="['/some/where']"
        *ngIf="AuthService.isAuthorized(['some', 'where'])">
    Personen
</button>

方法AuthService.isAuthorized使用提供的数组运行所有可用路由，并从特定路由的数据对象获取所需权限：

{
    path: 'some',
    component: SomeComponent,
    data: {
        permissions: [
            "read:some",
            "edit:some"
        ]
    },
    children: [
        {
            path: 'where',
            component: SomeComponent,
            data: {
                permissions: [
                    "read:where"
                ]
            }
        },
    ]
}

所以在这种情况下，当前登录用户需要权限["read:some","edit:some","read:where"]，以便向他显示该按钮。 到目前为止工作！

但是由于函数在模板内部被调用，因为角度变化检测，它被多次调用。我怎么能改变我的代码，以便只调用一次函数？如果只在之后调用一次，则认证完成将分配给经过身份验证的用户的所有权限写入AuthService.permissions

Answer 1

您可以使AuthService.isAuthorized（）方法返回一个promise：

@injectable()
export class AuthService {
  ...
  isAuthorized(arr: string[]): Promise<boolean> {
    return new Promise(resolve =>{
      // your logic here
      resolve(yourResult);
    });
  }
  ...
}

您可以在组件的ngOnInit上调用此方法（因此它将被调用一次）。您将返回值传递给组件中的新变量（例如isAuthorized），并在模板中使用此变量。

@Component({
selector: "your-component",
templateUrl: "yourTemplate.html"
})
export class YourComponent implements OnInit {
  isAuthorized: boolean;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.isAuthorized(['some', 'where']).then(result => {
      this.isAuthorized = result;
    });
  }
}

在模板中，您只需使用isAuthorized变量。

<button [routerLink]="['/some/where']"
    *ngIf="isAuthorized">
Personen
</button>

修改如果AuthService.isAuthorized（）只需要调用一次但是对于多个元素，那么这些代码可能适合您的需要：

@Component({ selector: "your-component", templateUrl: "yourTemplate.html" }) export class YourComponent { isObjectAuthorized = {} as { isFirstAuthorized: boolean; isSecondAuthorized: boolean; }; constructor(private authService: AuthService) {} checkForAuthorization(isElementAuthorized, arr: string[]) { if (isElementAuthorized !== undefined) { return; } this.authService.isAuthorized(arr).then(result => { isElementAuthorized = result; }); } }

在你的模板中：

<button [routerLink]="['/some/where']" *ngIf="checkForAuthorization(isObjectAuthorized.isFirstAuthorized, ['some', 'where'])"> First </button> <button [routerLink]="['/some/where']" *ngIf="checkForAuthorization(isObjectAuthorized.isSecondAuthorized, ['some', 'where', 'else'])"> Second </button>

Angular2在模板和更改检测中起作用

1 个答案: