Question

在jhispter应用程序中，有没有办法在导航栏中添加我们实际登录的用户登录？我试图在navbar.component.html wiuthout success中添加以下剪辑。

由于

        <div [ngSwitch]="isAuthenticated()">
        <div class="alert alert-success" *ngSwitchCase="true">
            <span *ngIf="account" jhiTranslate="home.logged.message"
                translateValues="{username: '{{account.login}}'}"> You are logged in as user "{{account.login}}". </span>
        </div>

        <div class="alert alert-warning" *ngSwitchCase="false">
            <span jhiTranslate="global.messages.info.authenticated.prefix">If you want to </span>
            <a class="alert-link" (click)="login()" jhiTranslate="global.messages.info.authenticated.link">sign in</a></span>
        </div>
    </div>

Answer 1

在navbar.component.ts中添加Account类型的对象。

＆＃13;

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

import { ProfileService } from '../profiles/profile.service';
import {Principal, LoginModalService, LoginService, Account} from '../../shared';

import { VERSION } from '../../app.constants';

@Component({
    selector: 'jhi-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: [
        'navbar.css'
    ]
})
export class NavbarComponent implements OnInit {
    inProduction: boolean;
    isNavbarCollapsed: boolean;
    languages: any[];
    swaggerEnabled: boolean;
    modalRef: NgbModalRef;
    version: string;
    account: Account;

    constructor(
        private loginService: LoginService,
        private principal: Principal,
        private loginModalService: LoginModalService,
        private profileService: ProfileService,
        private router: Router
    ) {
        this.version = VERSION ? 'v' + VERSION : '';
        this.isNavbarCollapsed = true;
    }

    ngOnInit() {
        this.profileService.getProfileInfo().then((profileInfo) => {
            this.inProduction = profileInfo.inProduction;
            this.swaggerEnabled = profileInfo.swaggerEnabled;
        });
        this.principal.identity().then((account) => {
            this.account = account;
        });
    }

    collapseNavbar() {
        this.isNavbarCollapsed = true;
    }

    isAuthenticated() {
        return this.principal.isAuthenticated();
    }

    login() {
        this.modalRef = this.loginModalService.open();
    }

    logout() {
        this.collapseNavbar();
        this.loginService.logout();
        this.router.navigate(['']);
    }

    toggleNavbar() {
        this.isNavbarCollapsed = !this.isNavbarCollapsed;
    }

    getImageUrl() {
        return this.isAuthenticated() ? this.principal.getImageUrl() : null;
    }
}

＆＃13;

在html中尝试这样的事情：

＆＃13;

<span>
  Account
  <span *ngIf="account"> ({{account.login}})</span>
</span>

＆＃13;

Answer 2

类似于jhipster反应项目

在app.tsx中

<Header
  isAuthenticated={this.props.isAuthenticated}
  login={this.props.account.login}
  isAdmin={this.props.isAdmin}
  currentLocale={this.props.currentLocale}
  onLocaleChange={this.props.setLocale}
  ribbonEnv={this.props.ribbonEnv}
  isInProduction={this.props.isInProduction}
  isSwaggerEnabled={this.props.isSwaggerEnabled}
/>
.
.
.
const mapStateToProps = ({ authentication, applicationProfile, locale }: IRootState) => ({
  currentLocale: locale.currentLocale,
  isAuthenticated: authentication.isAuthenticated,
  account: authentication.account,
  isAdmin: hasAnyAuthority(authentication.account.authorities, [AUTHORITIES.ADMIN]),
  ribbonEnv: applicationProfile.ribbonEnv,
  isInProduction: applicationProfile.inProduction,
  isSwaggerEnabled: applicationProfile.isSwaggerEnabled
});

在header.tsx

中

const { currentLocale, isAuthenticated, login, isAdmin, isSwaggerEnabled, isInProduction } = this.props;
.
.
.
<AccountMenu login={login} isAuthenticated={isAuthenticated} closeNav={this.closeNav} />

在account.tsx中

export const AccountMenu = props => (
  <NavDropdown
    closeNav={props.closeNav}
    icon="user"
    name={props.isAuthenticated ? props.login : translate('global.menu.account.main')}
    id="account-menu"
  >
    {props.isAuthenticated ? accountMenuItemsAuthenticated : accountMenuItems}
  </NavDropdown>
);

Answer 3

使用以下内容更新navbar.component.ts...。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

import { VERSION } from 'app/app.constants';
import { Principal, LoginModalService, LoginService, Account } from 'app/core';
import { ProfileService } from '../profiles/profile.service';
import { JhiEventManager } from 'ng-jhipster';

@Component({
    selector: 'jhi-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['navbar.scss']
})
export class NavbarComponent implements OnInit {
    inProduction: boolean;
    isNavbarCollapsed: boolean;
    languages: any[];
    swaggerEnabled: boolean;
    modalRef: NgbModalRef;
    version: string;
    account: Account;

    constructor(
        private loginService: LoginService,
        private principal: Principal,
        private loginModalService: LoginModalService,
        private profileService: ProfileService,
        private router: Router,
        private eventManager: JhiEventManager
    ) {
        this.version = VERSION ? 'v' + VERSION : '';
        this.isNavbarCollapsed = true;
    }

    ngOnInit() {
        this.profileService.getProfileInfo().then(profileInfo => {
            this.inProduction = profileInfo.inProduction;
            this.swaggerEnabled = profileInfo.swaggerEnabled;
        });
        this.principal.identity().then(account => {
            this.account = account;
        });
        this.registerAuthenticationSuccess();
    }

    registerAuthenticationSuccess() {
        this.eventManager.subscribe('authenticationSuccess', message => {
            this.principal.identity().then(account => {
                this.account = account;
            });
        });
    }

    collapseNavbar() {
        this.isNavbarCollapsed = true;
    }

    isAuthenticated() {
        return this.principal.isAuthenticated();
    }

    login() {
        this.modalRef = this.loginModalService.open();
    }

    logout() {
        this.collapseNavbar();
        this.loginService.logout();
        this.router.navigate(['']);
    }

    toggleNavbar() {
        this.isNavbarCollapsed = !this.isNavbarCollapsed;
    }

    getImageUrl() {
        return this.isAuthenticated() ? this.principal.getImageUrl() : null;
    }
}

将home.component.html更新为...。

<span *ngIf="!isAuthenticated() || account == null">
 <fa-icon icon="user"></fa-icon>
<span>
   Sign in
</span>
</span>
<span *ngIf="account && isAuthenticated()">
<span>
 {{ account.login }}
</span>
</span>

Answer 4

https://stackoverflow.com/a/54517456/5963873

此外，还应执行以下操作

如果登录请求成功，则应该这样发布

this.eventManager.broadcast ('authenticationSuccess');

在jhipster中的导航栏中显示用户名

4 个答案: