登录功能完成

fengxiang

2018-02-01 8702a063e0e545f2ffc57f203b9c849599415923

登录功能完成

 src/app/app.component.ts

@@ -1,3 +1,4 @@
import { LoginService } from '@business/services/http/login.service';
import { Component, HostBinding, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { ThemesService, SettingsService, TitleService } from '@delon/theme';
@@ -17,7 +18,8 @@
    private theme: ThemesService,
    private settings: SettingsService,
    private router: Router,
    private titleSrv: TitleService) {
    private titleSrv: TitleService,
    private loginService:LoginService) {
  }

  ngOnInit() {

 src/app/app.module.ts

@@ -21,6 +21,7 @@
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ALAIN_I18N_TOKEN } from '@delon/theme';
import { I18NService } from '@core/i18n/i18n.service';
import { LoginService } from '@business/services/http/login.service';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
@@ -54,6 +55,8 @@
        })
    ],
    providers: [
        // loginservice 里储存了token，放在全局
        LoginService,
        { provide: LOCALE_ID, useValue: 'zh-Hans' }, 
        { provide: HTTP_INTERCEPTORS, useClass: SimpleInterceptor, multi: true},    
        { provide: HTTP_INTERCEPTORS, useClass: DefaultInterceptor, multi: true},    

 src/app/business/business.module.ts

@@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
// Statics
import 'rxjs/add/observable/throw';

@@ -14,7 +15,8 @@

@NgModule({
  imports: [
    CommonModule
    CommonModule,
    HttpModule
  ]
})
export class BusinessModule { }

 src/app/business/entity/data.ts

@@ -125,4 +125,11 @@
  address:string;
  describe:string;
  name:string;
}

export interface UserContext {
  authorities: any[];
  mode: string;
  organizationId: number;
  username: string;
}

 src/app/business/entity/token.ts

New file
@@ -0,0 +1,4 @@
export interface Authorization{
    token:string;
    refreshToken:string;
}

 src/app/business/services/http/login.service.ts

New file
@@ -0,0 +1,34 @@
import { Authorization } from '@business/entity/token';
import { HttpClient } from '@angular/common/http';
import { environment } from 'environments/environment';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { UserContext } from '@business/entity/data';
import { error } from 'selenium-webdriver';

@Injectable()
export class LoginService {
  public authorization:Authorization;
  public userContext:UserContext;
  private urls = {
    login:environment.SERVER_BASH_URL+'/auth/login',
    userContext:environment.SERVER_BASH_URL+'/user-context',
  };
  constructor(private http:HttpClient) { }
  public validate(username:string,password:string):Observable<Authorization>{
      return this.http.post(this.urls.login,{username:username,password:password,mode:"Web"}).map(
           (res:any) => {
               this.authorization = res;
               return res;
           }
      );
  }
  public loadUserContext():void{
      this.http.get(this.urls.userContext).subscribe(
        (res:UserContext) => {
           this.userContext = res;
           return res;
        }
      );
  }
}

 src/app/delon.module.ts

@@ -186,6 +186,9 @@
        // auth
        AlainAuthModule.forRoot({
            // ignores: [ `\\/login`, `assets\\/` ],
            token_send_key : 'X-Authorization',
            token_send_template : 'Bearer ${token}',
            token_send_place : 'header',
            login_url: `/passport/login`,
            allow_anonymous_key: `_allow_anonymous`
        }),

 src/app/routes/dashboard/v1/v1.component.ts

@@ -1,3 +1,4 @@
import { LoginService } from '@business/services/http/login.service';
import { NzMessageService } from 'ng-zorro-antd';
import { Component, OnInit } from '@angular/core';
import { _HttpClient } from '@delon/theme';
@@ -8,7 +9,8 @@
})
export class DashboardV1Component implements OnInit {

    constructor(private http: _HttpClient, public msg: NzMessageService) { }
    constructor(private http: _HttpClient, public msg: NzMessageService,
    public loginService:LoginService) { }

    todoData: any[] = [
        { completed: true, avatar: '1', name: '苏先生', content: `请告诉我，我应该说点什么好？` },
@@ -26,6 +28,10 @@
    offlineChartData: any[] = [];

    ngOnInit() {
                // 加载用户信息,延迟加载防止异常
                setTimeout(() => {
                    this.loginService.loadUserContext();
                }, 1);
        // this.http.get('/chart').subscribe((res: any) => {
        //     this.webSite = res.visitData.slice(0, 10);
        //     this.salesData = res.salesData;

 src/app/routes/passport/login/login.component.html

@@ -10,7 +10,7 @@
            <ng-container *ngIf="userName.dirty || userName.touched">
                <p nz-form-explain *ngIf="userName.errors?.required">请输入账户名！</p>
                <p nz-form-explain *ngIf="userName.errors?.minlength">至少五个字符</p>
            </ng-container>
            </ng-container>           
        </div>
    </div>
    <div nz-form-item>
@@ -21,6 +21,7 @@
                </ng-template>
            </nz-input>
            <div nz-form-explain *ngIf="(password.dirty || password.touched) && password.errors?.required">请输入密码！</div>
            <p nz-form-explain [ngStyle]="{'color': 'red'}" *ngIf="validateError">输入用户名或者密码错误！</p>
        </div>
    </div>
    <div nz-form-item nz-row>

 src/app/routes/passport/login/login.component.ts

@@ -1,3 +1,5 @@
import { Authorization } from '@business/entity/token';
import { LoginService } from './../../../business/services/http/login.service';
import { SettingsService } from '@delon/theme';
import { Component, OnDestroy, Inject } from '@angular/core';
import { Router } from '@angular/router';
@@ -5,12 +7,11 @@
import { NzMessageService } from 'ng-zorro-antd';
import { SocialService, SocialOpenType, ITokenService, DA_SERVICE_TOKEN } from '@delon/auth';
import { environment } from '@env/environment';

@Component({
    selector: 'passport-login',
    templateUrl: './login.component.html',
    styleUrls: [ './login.component.less' ],
    providers: [ SocialService ]
    providers: [ SocialService]
})
export class UserLoginComponent implements OnDestroy {

@@ -25,6 +26,7 @@
        public msg: NzMessageService,
        private settingsService: SettingsService,
        private socialService: SocialService,
        private loginService:LoginService,
        @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {
        this.form = fb.group({
            userName: [null, [Validators.required, Validators.minLength(5)]],
@@ -75,28 +77,37 @@
            this.captcha.markAsDirty();
            if (this.mobile.invalid || this.captcha.invalid) return;
        }
        // mock http
        this.loading = true;
        setTimeout(() => {
            this.loading = false;
            if (this.type === 0) {
                if (this.userName.value !== 'admin' || this.password.value !== '123456') {
                    this.error = `账户或密码错误`;
                    return;
            this.loginService.validate(this.userName.value,this.password.value).subscribe(
                (res:Authorization) => {
                   if(res.token!=null){
                       this.tokenService.set({
                           token: res.token,
                           name: this.userName.value,
                           time: +new Date
                       });
                       this.validateError = true;
                       this.router.navigate(['/']);
                   }
                },
                (err) => {
                    console.log(err);
                    if(err instanceof ProgressEvent){
                        const error = <ProgressEvent>err;
                        let xmlHttp = error.target;
                        if(xmlHttp instanceof XMLHttpRequest){
                            const xmlHttpRequest = <XMLHttpRequest> xmlHttp;
                            if(xmlHttpRequest.status == 401){
                                 this.validateError = true;
                                 this.loading = false;
                            }
                        }
                    }
                }
            }
           );

            this.tokenService.set({
                token: '123456789',
                name: this.userName.value,
                email: `cipchk@qq.com`,
                id: 10000,
                time: +new Date
            });
            this.router.navigate(['/']);
        }, 1000);
    }

    public validateError:boolean;
    // region: social

    open(type: string, openType: SocialOpenType = 'href') {

 src/app/routes/routes-routing.module.ts

@@ -38,7 +38,7 @@
            { path: 'login', component: UserLoginComponent }
        ]
    },
    { path: '**', redirectTo: 'dashboard' }
    { path: '**', redirectTo: 'passport/login' }
];

@NgModule({

 src/environments/environment.ts

@@ -9,5 +9,5 @@
    production: false,
    hmr: false,
    useHash: true,
    SERVER_BASH_URL: `http://47.96.171.62:8080/screen_api_v2/`
    SERVER_BASH_URL: `http://127.0.0.1:8001/`
};

 yarn.lock

@@ -7866,9 +7866,9 @@
    semver "^5.3.0"
    xml2js "^0.4.17"

webpack-bundle-analyzer@^2.9.0:
webpack-bundle-analyzer@^2.9.2:
  version "2.9.2"
  resolved "http://registry.npm.taobao.org/webpack-bundle-analyzer/download/webpack-bundle-analyzer-2.9.2.tgz#63ed86eb71cc4cda86f68e685a84530ba0126449"
  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.2.tgz#63ed86eb71cc4cda86f68e685a84530ba0126449"
  dependencies:
    acorn "^5.1.1"
    chalk "^1.1.3"