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

---

修改文件

登录界面

登录界面

主要修改的文件如下图

文件

1. 修改 login.component.html，内容如下

  
    
      
      
        
          
            
          
          请输入账户名且至少五个字符！
        
      
      
        
          
            
          
          
            请输入密码！
          
        
      
    
    
  
  
    
      {{l("RememberMe")}}
    
    
  
  
    {{l("LogIn")}}
  

2. 修改login.component.ts，修改内容如下

import { SettingsService } from '@delon/theme';
import { Component, OnDestroy, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd';
import {
  SocialService,
  SocialOpenType,
} from '@delon/auth';
import { environment } from '@env/environment';

import { AbpSessionService } from '@abp/session/abp-session.service';

import { LoginService } from './login.service';

import { AppComponentBase } from '@shared/app-component-base';

@Component({
  selector: 'passport-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less'],
  providers: [SocialService],
})
export class UserLoginComponent extends AppComponentBase implements OnDestroy {
  form: FormGroup;
  error = '';
  type = 0;
  loading = false;

  /**
   * 是否登录中
   */
  submitting: boolean = false;

  constructor(
    injector: Injector,
    fb: FormBuilder,
    private router: Router,
    public msg: NzMessageService,
    private settingsService: SettingsService,
    private socialService: SocialService,
    public loginService: LoginService,
    private _sessionService: AbpSessionService
  ) {
    super(injector);
    this.form = fb.group({
      userName: [null, [Validators.required, Validators.minLength(5)]],
      password: [null, Validators.required],
      mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]],
      captcha: [null, [Validators.required]],
      remember: [true],
    });
  }

  get userName() {
       return this.form.controls.userName;
      }
      get password() {
        return this.form.controls.password;
      }
      get mobile() {
        return this.form.controls.mobile;
      }
      get captcha() {
        return this.form.controls.captcha;
      }

  count = 0;
  interval$: any;

  getCaptcha() {
    this.count = 59;
    this.interval$ = setInterval(() => {
      this.count -= 1;
      if (this.count <= 0) clearInterval(this.interval$);
    }, 1000);
  }

  /**
   * 多租户
   */
  get multiTenancySideIsTeanant(): boolean {
    return this._sessionService.tenantId > 0;
  }

  /**
   * 允许注册
   */
  get isSelfRegistrationAllowed(): boolean {
    if (!this._sessionService.tenantId) {
        return false;
    }

    return true;
  }

  /**
   * 登录
   */
  submit() {
    this.submitting = true;
    this.loginService.authenticate(
        () => this.submitting = false
    );
  }

  ngOnDestroy(): void {
    if (this.interval$) clearInterval(this.interval$);
  }
}

3. login.service.ts代码如下，主要是修改了默认的调整登录路径

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { TokenAuthServiceProxy, AuthenticateModel, AuthenticateResultModel, ExternalLoginProviderInfoModel, ExternalAuthenticateModel, ExternalAuthenticateResultModel } from '@shared/service-proxies/service-proxies';
import { UrlHelper } from '@shared/helpers/UrlHelper';
import { AppConsts } from '@shared/AppConsts';

import { LogService } from '@abp/log/log.service';
import { TokenService } from '@abp/auth/token.service';
import { UtilsService } from '@abp/utils/utils.service';

/**
 * 登录服务
 */
@Injectable()
export class LoginService {

    static readonly twoFactorRememberClientTokenName = 'TwoFactorRememberClientToken';

    authenticateModel: AuthenticateModel;
    authenticateResult: AuthenticateResultModel;

    rememberMe: boolean;

    constructor(
        private _tokenAuthService: TokenAuthServiceProxy,
        private _router: Router,
        private _utilsService: UtilsService,
        private _tokenService: TokenService,
        private _logService: LogService
    ) {
        this.clear();
    }

    /**
     * 登录验证
     * @param finallyCallback 
     */
    authenticate(finallyCallback?: () => void): void {
        finallyCallback = finallyCallback || (() => { });

        this._tokenAuthService
            .authenticate(this.authenticateModel)
            .finally(finallyCallback)
            .subscribe((result: AuthenticateResultModel) => {
                this.processAuthenticateResult(result);
            });
    }

    /**
     * 处理验证结果
     * @param authenticateResult 验证结果
     */
    private processAuthenticateResult(authenticateResult: AuthenticateResultModel) {
        this.authenticateResult = authenticateResult;

        if (authenticateResult.accessToken) {
            //Successfully logged in
            this.login(authenticateResult.accessToken, authenticateResult.encryptedAccessToken, authenticateResult.expireInSeconds, this.rememberMe);

        } else {
            //Unexpected result!

            this._logService.warn('Unexpected authenticateResult!');
            this._router.navigate(['passport/login']);
        }
    }

    /**
     * 保存登录信息到cookie
     * @param accessToken 
     * @param encryptedAccessToken 
     * @param expireInSeconds 
     * @param rememberMe 
     */
    private login(accessToken: string, encryptedAccessToken: string, expireInSeconds: number, rememberMe?: boolean): void {

        var tokenExpireDate = rememberMe ? (new Date(new Date().getTime() + 1000 * expireInSeconds)) : undefined;

        this._tokenService.setToken(
            accessToken,
            tokenExpireDate
        );

        this._utilsService.setCookieValue(
            AppConsts.authorization.encrptedAuthTokenName,
            encryptedAccessToken,
            tokenExpireDate,
            abp.appPath
        );

        var initialUrl = UrlHelper.initialUrl;
        if (initialUrl.indexOf('/login') > 0) {
            initialUrl = AppConsts.appBaseUrl;
        }

        location.href = initialUrl;
    }

    private clear(): void {
        this.authenticateModel = new AuthenticateModel();
        this.authenticateModel.rememberClient = false;
        this.authenticateResult = null;
        this.rememberMe = false;
    }
}

---

运行结果

1. 登录成功，显示主页面

   
   
   

   主页面

2. 登录失败

   
   
   

   账号密码错误

---

总结

通过对登录页的改造，现在可以正常使用abp后端提供的账号(admin)和密码(123qwe)进行登录。
在改造过程中，主要使用了[(ngModel)]对输入框进行双向绑定的改造。

---

我的公众号

我的公众号

---

源代码

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