我尝试使用 angular5 实现登录功能。我有一个我不明白的错误。
这是 login.component.ts 类:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpErrorResponse } from '@angular/common/http';
import { UserService } from '../auth/user.services';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
ngForm: NgForm;
login: string;
password: string;
myForm: FormGroup;
isLoginError : boolean = false;
connected : Boolean = false;
constructor(private userService: UserService, private router: Router) { }
ngOnInit() {
}
// Execute this when submit login form
OnSubmit(form){
console.log(form.value);
console.log(form.value.login);
this.connected = this.userService.authenticate(form.value.login,form.value.password).subscribe((data : any)=>{
return data.password = form.value.password;
//return true;
});
}
}
在 user.service.ts 中我有认证方法:
authenticate(login:string, password:string) :Observable<Boolean> {
console.log('Authenticate ....');
const credentials = {login:login, password:password};
let headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');
console.log('Appended content type ....');
console.log(' Login '+login+' Password '+password+' Headers '+headers);
//var data = this.http.get<any>(
// '/users?login?'+JSON.stringify(login),
// { headers }
//);
//console.log('Data '+data);
return this.http.get<any>(
'/users?login?'+JSON.stringify(login),
{ headers }
) //returns a User object having password
.map(user => user.password === password); // maps result to the desired true or false value
}
这是我的登录表单:
<div class="row">
<div class="col-md-6 offset-md-3 text-center">
<h2> Formulaire de connexion </h2>
<form (ngSubmit)="OnSubmit(loginForm)" #loginForm="ngForm">
<div class="form-group">
<label for="exampleInputEmail1">Login</label>
<input type="text" class="form-control" id="exampleInputEmail1" [(ngModel)]="login" name="login" aria-describedby="emailHelp" placeholder="Login">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" required [(ngModel)]="password" name="password" placeholder="Mot de passe">
</div>
<!-- <button type="submit" class="btn btn-primary" (click)="login()" [disabled]="!loginForm.form.valid">Connexion</button>
-->
<button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Connexion</button>
</form>
</div>
</div>
我的代码编译通过,我可以访问登录页面。但是当我输入登录名和密码时,出现错误。而且我看不到对我的服务器的请求。我认为错误发生在我的 http 请求之前。这是我收到的错误:
TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. Stack trace: subscribeToResult@webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:83:27 MergeMapSubscriber.prototype._innerSub@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143:18 MergeMapSubscriber.prototype._tryNext@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:140:9 MergeMapSubscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:123:13 Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:13 ScalarObservable.prototype._subscribe@webpack-internal:///./node_modules/rxjs/_esm5/observable/ScalarObservable.js:53:13 Observable.prototype._trySubscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:177:20 Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:165:88 MergeMapOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:97:16 Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13 FilterOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/filter.js:63:16 Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13 MapOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/map.js:60:16 Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13 MapOperator.prototype.call@webpack-internal:///./node_modules/rxjs/_esm5/operators/map.js:60:16 Observable.prototype.subscribe@webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:162:13 LoginComponent.prototype.OnSubmit@webpack-internal:///./src/app/login/login.component.ts:33:9 View_LoginComponent_0/<@ng:///AppModule/LoginComponent.ngfactory.js:29:23 handleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13763:115 callWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15272:39 debugHandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14859:12 dispatchEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10178:16 eventHandlerClosure/<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:12517:38 EventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4559:36 SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:245:13 SafeSubscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:192:17 Subscriber.prototype._next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:133:9 Subscriber.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subscriber.js:97:13 Subject.prototype.next@webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:65:17 EventEmitter.prototype.emit@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4527:24 NgForm.prototype.onSubmit@webpack-internal:///./node_modules/@angular/forms/esm5/forms.js:5840:9 View_LoginComponent_0/<@ng:///AppModule/LoginComponent.ngfactory.js:21:23 handleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:13763:115 callWithDebugContext@webpack-internal:///./node_modules/@angular/core/esm5/core.js:15272:39 debugHandleEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14859:12 dispatchEvent@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10178:16 renderEventHandlerClosure/<@webpack-internal:///./node_modules/@angular/core/esm5/core.js:10803:38 decoratePreventDefault/<@webpack-internal:///./node_modules/@angular/platform-browser/esm5/platform-browser.js:2680:53 ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:421:17 onInvokeTask@webpack-internal:///./node_modules/@angular/core/esm5/core.js:4956:24 ZoneDelegate.prototype.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:420:17 Zone.prototype.runTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:188:28 ZoneTask.invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:496:24 invokeTask@webpack-internal:///./node_modules/zone.js/dist/zone.js:1517:9 globalZoneAwareCallback@webpack-internal:///./node_modules/zone.js/dist/zone.js:1543:17
错误在行 <form (ngSubmit)="OnSubmit(loginForm)" #loginForm="ngForm">
我看不出问题出在哪里。我错过了什么?谢谢 谢谢
最佳答案
我在发布的代码中看不到任何可能导致请求无法发送的内容。也许你在某处有一些 http 拦截器?
您的代码中还有一些错误
HttpHeaders
是不可变的
因此,如果您希望正确发送 header ,则需要将代码更改为
let headers = new HttpHeaders().append('Content-Type', 'application/json');
内容类型
您不需要为返回 json 的请求设置内容类型,httpClient
默认会自动将响应转为 json 对象
错误的查询参数
应该是 = 而不是 ?
'/users?login='+JSON.stringify(login),
组件
this.connected
永远不会是 bool 值,而是对可观察对象的引用在 subcribe 方法中,data 是一个 bool 值,而不是一个对象(因为你在你的服务中映射了它)
注意 我希望您显示的身份验证方法不会是最后一个。就目前而言,它假设服务器可以返回用户的详细信息,包括明文密码……如果您的用户将密码存储在纯文本服务器端,从安全的 Angular 来看这真的很糟糕
关于Angular5 : TypeError: You provided 'undefined' where a stream was expected. 您可以提供一个 Observable、Promise、Array 或 Iterable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49537471/