Question

我需要创建一个条件，当用户没有权限（未登录）时可以看到该条件，但是我需要先检查该权限，因此当用户登录时，我将看不到内容

我正在使用JHipster项目中的'jhiHasAnyAuthority'指令。

<div *jhiHasAnyAuthority="''">This should appear.... when the VISITOR is NOT logged </div>

这在有权限的情况下有效（如果您想知道）：

<div *jhiHasAnyAuthority="['ROLE_ADMIN', 'ROLE_USER']">This should appear.... when ADMIN or USER is logged </div>
<div *jhiHasAnyAuthority="'ROLE_ADMIN'">This should appear.... when ADMIN is logged </div>

所以我尝试了其他替代方法，例如：

<div *jhiHasAnyAuthority="''">This should appear.... when Blank is NOT logged </div>

但是它们不起作用！

注意：我不需要将文本放在普通的DIV中，因此，如果用户未登录，它将显示在屏幕上，因为在登录时也会出现。

谢谢

Answer 1

您正在使用的* jhiHasAnyAuthority指令是JHipseter项目的一部分。

其源代码可在https://github.com/jhipster/jhipster-sample-app-ng2/blob/master/src/main/webapp/app/shared/auth/has-any-authority.directive.ts

中找到

如果您查看源代码，您会发现它不支持否定测试，并且我假设检查“ HasAnyAuthority”中是否为空或null的授权字符串与检查用户是否没有权限。

因此，您似乎无法使用此指令来测试是否缺少授权，该指令也似乎不支持* ngIf那样的if / else语法。

我认为做您想要做的唯一方法是编写基于* jhiHasAnyAuthority的自定义指令，或者修改* jhiHasAnyAuthority以添加所需的行为。

在任何一种情况下，如果都能正常运行，最好向JHipster项目提交拉取请求。

Answer 2

在has-not-authority.directive.ts中创建文件app\shared\auth：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { AccountService } from 'app/core/auth/account.service';

/**
 * @whatItDoes Conditionally includes an HTML element if current user has not any
 * of the authorities passed as the `expression`.
 *
 * @howToUse
 * ```
 *     <some-element *jhiHasNotAuthority="'ROLE_ADMIN'">...</some-element>
 *
 *     <some-element *jhiHasNotAuthority="['ROLE_ADMIN', 'ROLE_USER']">...</some-element>
 * ```
 */
@Directive({
  selector: '[jhiHasNotAuthority]'
})
export class HasNotAuthorityDirective {
  private authorities: string[];

  constructor(private accountService: AccountService, private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) {}

  @Input()
  set jhiHasNotAuthority(value: string | string[]) {
    this.authorities = typeof value === 'string' ? [value] : value;
    this.updateView();
    // Get notified each time authentication state changes.
    this.accountService.getAuthenticationState().subscribe(() => this.updateView());
  }

  private updateView(): void {
    const hasAnyAuthority = this.accountService.hasAnyAuthority(this.authorities);
    this.viewContainerRef.clear();
    if (!hasAnyAuthority) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
  }
}

更新shared.module.ts中的app\shared文件：


import { NgModule } from '@angular/core';
import { YourAppSharedLibsModule } from './shared-libs.module';
import { FindLanguageFromKeyPipe } from './language/find-language-from-key.pipe';
import { JhiAlertComponent } from './alert/alert.component';
import { JhiAlertErrorComponent } from './alert/alert-error.component';
import { JhiLoginModalComponent } from './login/login.component';
import { HasAnyAuthorityDirective } from './auth/has-any-authority.directive';
import { HasNotAuthorityDirective } from './auth/has-not-authority.directive';

@NgModule({
  imports: [YourAppSharedLibsModule],
  declarations: [FindLanguageFromKeyPipe, JhiAlertComponent, JhiAlertErrorComponent, JhiLoginModalComponent, HasAnyAuthorityDirective, HasNotAuthorityDirective],
  entryComponents: [JhiLoginModalComponent],
  exports: [
    YourAppSharedLibsModule,
    FindLanguageFromKeyPipe,
    JhiAlertComponent,
    JhiAlertErrorComponent,
    JhiLoginModalComponent,
    HasAnyAuthorityDirective,
    HasNotAuthorityDirective
  ]
})
export class YourAppSharedModule {}

这样，我们有效地复制了HasAnyAuthorityDirective的内容，但是翻转了createEmbeddedView方法调用的条件。

Answer 3

您本可以尝试这种方式！

<div *jhiHasAnyAuthority="[]">This should appear... for No_Authority! </div>

PS：我尚未测试。

JHipster * jhiHasAnyAuthority指令检查“无授权”

3 个答案: