abp & ng-alain 改造前端 六 —— 用户信

---

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。
ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。
官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

1. 目录:https://www.jianshu.com/p/589af988637c
2. 源代码:https://github.com/ZhaoRd/abp-alain

---

目标

用户登录之后，在头部和左侧标板，显示用户信息，并且提供退出功能

---

修改头部用户信息

ng-alain用的是SettingsService来保存的用户名显示的用户信息，该用户信息是在程序启动时候设置的，见代码

设置用户信息.png

保持该代码不变，修改user.component.ts

文件.png

import { Component, Inject,OnInit,Injector } from '@angular/core';
import { Router } from '@angular/router';
import { SettingsService } from '@delon/theme';
import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
import { AppComponentBase } from '@shared/app-component-base';
import { AppAuthService } from '@shared/auth/app-auth.service';

@Component({
  selector: 'header-user',
  template: `
  <nz-dropdown nzPlacement="bottomRight">
    <div class="item d-flex align-items-center px-sm" nz-dropdown>
      <nz-avatar [nzSrc]="'/assets/images/user.png'" nzSize="small" class="mr-sm"></nz-avatar>
      {{shownLoginName}}
    </div>
    <div nz-menu class="width-sm">
      <div nz-menu-item [nzDisabled]="true"><i class="anticon anticon-user mr-sm"></i>个人中心</div>
      <div nz-menu-item [nzDisabled]="true"><i class="anticon anticon-setting mr-sm"></i>设置</div>
      <li nz-menu-divider></li>
      <div nz-menu-item (click)="logout()"><i class="anticon anticon-setting mr-sm"></i>退出登录</div>
    </div>
  </nz-dropdown>
  `,
})
export class HeaderUserComponent  extends AppComponentBase implements OnInit{

  shownLoginName: string = "";

  constructor(
    injector: Injector,
    private _authService: AppAuthService,
    public settings: SettingsService,
    private router: Router,
    @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService,
  ) {

    super(injector);

  }

  ngOnInit() {
    this.shownLoginName = this.appSession.getShownLoginName();
}

  logout() {
    this._authService.logout();
  }
}

使用ABP提供的类AppSessionService获取显示登陆者的信息

---

退出功能

ng-alain使用如下代码实现退出

this.tokenService.clear();
this.router.navigateByUrl(this.tokenService.login_url);

修改后的代码如下图

退出.png
使用AppAuthService logout 方法退出.

---

左侧面板的用户信息和退出

同上，使用 AppSessionService 获取需要显示的用户信息，使用 AppAuthService logout方法退出当前登录信息

---

效果

头部用户信息
左侧面板用户信息

---

我的公众号

我的公众号

---

源代码

源代码:https://github.com/ZhaoRd/abp-alain