Question

我使用angular 2构建简单的聊天网站，它有一个登录站点使用socket.io进行身份验证，当点击“登录”按钮或按“输入”时，它会向用户发送一条消息，用户名为＆amp;密码由socket.io emit和server返回一个消息，以接受或拒绝socket.io emit。我是菜鸟，这是我能搞清楚的唯一方法。我可以像google上的许多例子一样学习http get解决方案，但我想从我的大脑中获得一些东西。我想知道是否有人试图通过点击登录按钮或键盘输入发送登录请求来垃圾邮件我的服务器。我的问题是如何防止有人垃圾邮件点击或密钥输入登录屏幕？这是我的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()

等

Angular 2阻止点击或输入密钥垃圾邮件？

1 个答案: