英文:
Angular Logout Route not called
问题
我正在尝试实现一个 LogoutFunction，但它没有被分派到我的 API（Spring Boot）中。
登录功能正常工作。
我想将一个 ID 传递给 API，并获得一个成功的布尔值返回。
该方法肯定被调用。控制台日志一直打印到 http POST：
Postman 也可以到达 API，调用相应的函数并将输出写入终端。
TypeScript 代码如下：
logout(): Observable<LogoutResponse> {
const logoutMessage: LogoutMessage = new LogoutMessage();
const Id = this.getIdFromLocalStorage();
const accessToken = localStorage.getItem("token");
if (Id !== null && accessToken && accessToken !== '') {
logoutMessage.Id = Id!;
}
console.log(logoutMessage);
console.log(this.apiUrl + 'auth/logout');
return this.http
.post<LogoutResponse>(this.apiUrl + 'auth/logout', logoutMessage, { responseType: 'json' })
.pipe(
tap((response) => {
console.log(response);
if (response.success) {
this.onLogoutSuccessful();
}
})
);
}
<div class="logout" *ngIf="(isLoggedIn | async)">
<button mat-raised-button color="warn" type="submit" class="btn btn-primary" (click)="authService.logout()">
Abmelden
</button>
</div>
LogoutMessage 看起来没问题。Logout 按钮在 app.component.html 中。但是在我的 auth.service.ts 中调用了该函数，如上面的日志所证明。
这是一个类似的问题，但没有解决方案，也不适用于我的情况。
text
英文:
I am trying to implement a LogoutFunction. However, it is not dispatched to my API(spring Boot).
Login works fine, though.
I want to pass an ID to API and get a success boolean back.
The Method is definitely called. Console logs until the http POST:
Postman also makes it to the API, where the corresponding function is called to and output is written to terminal.
TypeScript:
logout(): Observable<LogoutResponse> {
const logoutMessage: LogoutMessage = new LogoutMessage();
const Id= this.getIdFromLocalStorage();
const accessToken = localStorage.getItem("token");
if (Id!== null && accessToken && accessToken !== '') {
logoutMessage.Id= Id!;
}
console.log(logoutMessage);
console.log(this.apiUrl + 'auth/logout');
return this.http
.post<LogoutResponse>(this.apiUrl + 'auth/logout', logoutMessage, { responseType: 'json' })
.pipe(
tap((response) => {
console.log(response);
if (response.success) {
this.onLogoutSuccessful();
}
})
);
}
<div class="logout" *ngIf="(isLoggedIn | async)">
<button mat-raised-button color="warn" type="submit" class="btn btn-primary" (click)="authService.logout()">
Abmelden
</button>
</div>
LogoutMessage looks fine.Logout-Button is in app.component.html. But function in my auth.service.ts is called, as i can prove with the logs above.
Heres a similar issue, but not resolved and applicable to my case.
text
答案1
得分: 1
你没有订阅 logout()，因此 HTTP 请求没有被执行。你必须订阅 HttpClient 的可观察对象才能变为“热”状态。
英文:
You are not subscribing to logout() therefore the http request is not executed. You must subscribe to HttpClient observables to become "hot".
答案2
得分: 0
如@Pes所说，您必须订阅Logout以正确调用它。在您的组件中实现一个带有注销按钮的函数，并在该函数中订阅它：
logout(): void {
this.authService.logout().subscribe({
next: response => { /* 处理响应 */ },
error: error => { /* 处理错误 */ }
})
}
然后像这样调用它：
<div class="logout" *ngIf="(isLoggedIn | async)">
<button mat-raised-button color="warn" type="submit" class="btn btn-primary" (click)="logout()">
Abmelden
</button>
</div>
英文:
As @Pes have said, you have to subscribe to Logout in order to call it properly. Implement a function within your component with logout button and subscribe to it within the function:
logout(): void {
this.authService.logout().subscribe({
next: response => { /* handle response */ },
error: error => { /* handle error */ }
})
}
Call it like that then:
<div class="logout" *ngIf="(isLoggedIn | async)">
<button mat-raised-button color="warn" type="submit" class="btn btn-primary" (click)="logout()">
Abmelden
</button>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论