在 JHipster Angular 的主要组件中的“路由器插座”之外访问 Principal

Posted 2023-02-23

【中文标题】在 JHipster Angular 的主要组件中的“路由器插座”之外访问 Principal

【英文标题】：Acces to Principal outside the 'router-outlet' in main component in JHipster Angular

【发布时间】：2019-05-04 08:34:43

【问题描述】：

我正在生成的应用程序中更改 JHipster 布局。

我可以将Principal 注入到router-outlet 内呈现的任何组件中，但是，如果我尝试将其注入主组件中，则每当我尝试登录/注销时都会显示错误（如果我刷新页面一切正常）。

导致问题的代码是

export class JhiMainComponent implements OnInit 
    constructor(private jhiLanguageHelper: JhiLanguageHelper, private router: Router, principal: Principal) 

如果我删除 principal: Principal 一切都会再次运行，如果我添加此注入，则登录将停止工作并出现错误

错误类型错误：无法读取未定义的属性“身份验证” 在 LoginService.logout (webpack-internal:///./src/main/webapp/app/core/login/login.service.ts:33) 在 NavbarComponent.logout (webpack-internal:///./src/main/webapp/app/layouts/navbar/navbar.component.ts:49) 在 Object.eval [as handleEvent] (ng:///ConsuldentAppModule/NavbarComponent.ngfactory.js:695) 在handleEvent (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:19661) 在 callWithDebugContext (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:20755) 在 Object.debugHandleEvent [as handleEvent] (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:20458) 在 dispatchEvent (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:17110) 在 eval (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:17557) 在 htmlAnchorElement.eval (webpack-internal:///./node_modules/@angular/platform-b​​rowser/fesm5/platform-b​​rowser.js:1044) 在 ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:420)

我需要该属性，因为我有一些条件样式可供选择，具体取决于用户是否登录（这里我尝试使用 isAuthenticated() 方法）

<div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed show" [ngClass]="
    'page-without-sidebar': isPageWithoutSidebar() || !isAuthenticated()
  ">
    <router-outlet name="header" *ngIf="!pageSettings.pageEmpty"></router-outlet>
    <router-outlet name="sidebar" *ngIf="!isPageWithoutSidebar() && !pageSettings.pageEmpty && isAuthenticated()"></router-outlet>

    <div id="content" class="content" [ngClass]="
    'content-full-width': pageSettings.pageContentFullWidth,
    'content-inverse-mode': pageSettings.pageContentInverseMode,
    'p-0 m-0': pageSettings.pageEmpty
  ">
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
    </div>

    <jhi-footer *ngIf="pageSettings.pageWithFooter"></jhi-footer>
</div>

【参考方案1】：

好吧，我所做的是使用变量创建服务

@Injectable(
    providedIn: 'root'
)
export class PageSettingsService 
    pageSettings = pageSettings;

    constructor() 
    

然后我在主组件中注入这个服务，在那里我使用pageSettings 属性

export class AppComponent extends JhiMainComponent implements OnInit 

    pageSettings;
    // window scroll
    pageHasScroll;

    ngOnInit() 
        super.ngOnInit();
        // page settings
        this.pageSettings = this.pageSettingsService.pageSettings;
    

然后我编辑了登录服务（这部分感觉不干净，但是可以）

@Injectable( providedIn: 'root' )
export class LoginService 
    constructor(private principal: Principal, private authServerProvider: AuthServerProvider, private pageSettingsService: PageSettingsService) 

    login(credentials, callback?) 
        const cb = callback || function() ;

        return new Promise((resolve, reject) => 
            this.authServerProvider.login(credentials).subscribe(
                data => 
                    this.principal.identity(true).then(account => 
                        resolve(data);
                        this.pageSettingsService.pageSettings.pageWithoutSidebar = false; //Added
                    );
                    return cb();
                ,
                err => 
                    this.logout();
                    reject(err);
                    return cb(err);
                
            );
        );
    
...
    logout() 
        this.pageSettingsService.pageSettings.pageWithoutSidebar = true; //Added
        this.authServerProvider.logout().subscribe();
        this.principal.authenticate(null);