Angular 2防止點擊或輸入密碼垃圾郵件？

Question

我使用angular 2構建簡單的聊天網站，它有一個登錄網站使用socket.io進行身份驗證，當點擊按鈕'login'或按'enter'時，它會發送一條消息到服務器，用戶名爲&，由socket.io發送密碼而服務器也會通過socket.io返回一個消息來接受或拒絕。我是noob，這是我能弄明白的唯一方法。我可以像google上的許多例子一樣學習http解決方案，但我想從我的大腦中獲得一些東西。我想知道是否有人試圖通過點擊登錄按鈕或鍵入命令發送垃圾郵件我的服務器進入發送登錄請求。而我的問題是如何防止有人在登錄屏幕上輸入垃圾郵件點擊或鍵入？ 這是SocketioService我的代碼：

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { Observer } from 'rxjs/Observer'; 
import * as io from 'socket.io-client'; 
import Url = require('../data/url'); 
import 'rxjs/add/operator/debounceTime'; 

@Injectable() 
export class SocketioService { 
    private socket: any; 
    private urlSocketIo: any 

    constructor() { 
     this.urlSocketIo = Url.SocketIo; 
     this.socket = io(this.urlSocketIo); 
    }; 

    sendMessage(cmd: string, content: string) { 
     this.handleMessage(cmd, content).debounceTime(50000).subscribe(); 
    }; 

    handleMessage(cmd: string, content: string) { 
     let observable = new Observable<any>((observer: Observer<any>) => { 
      this.socket.emit(cmd, content); 
     }); 
     return observable; 
    }; 

    receiveMessage(cmd: string) { 
     let observable = new Observable<any>((observer: Observer<any>) => { 
      this.socket.on(cmd, (Data: any) => { 
       observer.next(Data); 
      }); 
      return() => { 
       this.socket.disconnect(); 
      }; 
     }); 
     return observable; 
    }; 
}; 

這裏LoginComponent：

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { SocketioService } from '../_services/socketio.service'; 
import login = require('../data/login.authenticate'); 
import { Message } from 'primeng/primeng'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'login.component.html', 
    providers: [SocketioService] 
}) 

export class LoginComponent implements OnInit, OnDestroy { 
    connection: any; 
    model: any = { 
     username: '', 
     password: '' 
    }; 
    msgs: Message[] = []; 

    constructor(
     private router: Router, 
     private socketioService: SocketioService) { }; 

    login() { 
     let _username: string = this.model.username; 
     let _password: string = this.model.password; 
     if (_username.length > 0 && _password.length > 0) { 
      let _cmd = 'auth'; 
      let _content = JSON.stringify({ username: _username, password: _password }); 
      this.socketioService.sendMessage(_cmd, _content); 
     } else { 
      this.msgs = []; 
      this.msgs.push({ severity: 'warn', summary: '', detail: 'Please provide Username & Password!' }); 
     }; 
    }; 

    logout(): void { 
     login.authenticated = false; 
     this.socketioService.sendMessage('auth', JSON.stringify({ username: 'logout', password: 'logout' })); 
    }; 

    authenticate(): void { 
     this.socketioService.receiveMessage('auth').subscribe((Data) => { 
      if (Data === 'OK') { 
       login.authenticated = true; 
       this.router.navigate(['/']); 
      } else { 
       login.authenticated = false; 
       this.msgs = []; 
       this.msgs.push({ severity: 'error', summary: '', detail: Data }); 
      } 
     }); 
    } 

    ngOnInit() { 
     // reset login status 
     this.logout(); 

     this.authenticate(); 
    } 

    ngOnDestroy() { 
     this.connection.unsubscribe(); 
    } 
} 

這裏LoginComponent HTML：

<div class="center-page"> 
    <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid"> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-12 text-center"> 
       Username: 
      </div> 
     </div> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-12"> 
       <input (keyup.enter)="login()" type="text" pInputText name="username" [(ngModel)]="model.username" #username="ngModel" required /> 
      </div> 
     </div> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-12 text-center"> 
       Password: 
      </div> 
     </div> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-12"> 
       <input (keyup.enter)="login()" type="password" pPassword name="password" [(ngModel)]="model.password" #password="ngModel" required /> 
      </div> 
     </div> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-12"> 
       <button pButton type="text" label="Login" (click)='login()'></button> 
      </div> 
     </div> 
     <div class="ui-grid-row"> 
      <div class="ui-grid-col-12"> 
       <p-messages [value]="msgs"></p-messages> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

你可以去抖動時間添加到您的角形式。

this.loginForm.valueChanges 
      .debounceTime(500) 
      .distinctUntilChanged() 

等