我正在以Angular 6
作为客户端,以Laravel 5.6
作为API的个人项目,我不明白身份验证服务的情况。
在某些情况下:我想实现jwtAuth
来管理用户身份验证,并且它运行良好(我已经用Postman测试了api端点)。现在,这是我的注册功能:
public function register(RegisterFormRequest $request)
{
$user = new User;
$user->username = $request->username;
$user->email = $request->email;
$user->password = bcrypt($request->password);
$user->save();
return response()->json([
'status' => 'success',
'message' => '¡Usuario registrado!',
'user' => $user
], 200);
}
如您所见,此函数返回一个带有状态,消息和用户信息的json。在客户端,这是我的auth.service.ts
“注册用户”功能:
registerUser(user: User):Observable<User> {
return this.http.post<User>(`${this.url}/register`, user, httpOptions)
.pipe(
catchError((e:Response) => throwError(e))
);
}
如果一切正常,这将返回我在API上定义的完全相同的json。最后,在我的register.component.ts
中,这是我用来实现该服务功能的功能:
onSubmit() {
this.authService.registerUser(this.user).subscribe(
response => {
swal({
type: response.status,
text: response.message,
footer: 'Usted será redirigido hacia el formulario de ingreso.',
showConfirmButton: false,
showCloseButton: false,
showCancelButton: false,
allowEscapeKey: false,
allowOutsideClick: false,
});
}
);
}
只是那样,它不起作用,因为它会引发下一个错误:
Property 'status' does not exist on type 'User'.
顺便说一下,这是我的user
课:
export class User {
id: number;
username: string;
email: string;
password: string;
password_confirmation: string;
}
我认为它与response.message
的作用相同,并且我认为它与Observable
处理程序有关,但我不知道它是如何工作的。如果我将这些代码删除到代码行中,则一切正常,请问如何解决此问题?
PD:对不起,我的英语不好!
答案 0 :(得分:1)
这是因为您的函数registerUser
返回的是User
类型的可观察对象:
registerUser(user: User):Observable<User>
当您调用它时:
registerUser(this.user).subscribe(
response => {
swal({
type: response.status,
response
的类型应该为User
(因为您已经指定了它),因此将您的返回类型更改为Angular http响应或任何类型,然后响应将具有status属性: )
答案 1 :(得分:1)
您必须在用户类型中添加状态:
export class User {
id: number;
username: string;
email: string;
password: string;
password_confirmation: string;
status: string;
}
否则,您可以从服务中返回Observable。
registerUser(user: User):Observable<Any> {
return this.http.post<Any>(`${this.url}/register`, user, httpOptions)
.pipe(
catchError((e:Response) => throwError(e))
);
}
答案 2 :(得分:1)
当您的响应实际上是您在api上创建的响应类型时,您正在将响应投射给用户:
}
status: string
message: string
user: User
}
因此,如果您不关心状态字段或消息字段,只需映射响应即可返回用户。
//Create a response type or interface or class
export interface RegisterUserResponse {
status: string
message: string
user: User
}
registerUser(user: User):Observable<User> {
return this.http.post<User>(`${this.url}/register`, user, httpOptions)
.pipe(
catchError((e:Response) => throwError(e)),
map((resp: RegisterUserResponse) => {
return resp.user; //this should satisfy 'this.http.post<User>'
})
);
}