使用警告消息注销用户
Logout user with alert message
我有一个控制登录页面和警报(成功、错误、信息...)的登录组件。当我在页面中时,我可以毫无问题地显示警报,例如,通知用户无效凭据或通知页面正在更新。基本上,这些消息是绑定到前端的登录组件 class 中的变量:
export class Login {
error;
info;
}
现在当用户注销时我重定向到登录页面:
this.router.navigate(['/login']);
我想向用户显示一个警告,通知注销过程成功(实际上我将使用相同的逻辑来通知用户会话是否过期)。我在登录组件中创建了两个方法 class:
logout() {
this.authenticationService.logout()
.subscribe(response => {
this.logoutRedirect();
},
error => {
this.logoutRedirect();
});
}
logoutRedirect() {
this.authenticationService.removeUser();
this.info = 'Logout success';
this.router.navigate(['/login']);
}
除消息外一切正常。我相信它会发生,因为当用户被重定向时,使用了一个新的登录 class 而这个没有信息信息。
解决这个问题的最佳方法是什么:我会在我的应用程序中经常使用它,所以我想正确地使用它。
我使用服务解决了这个问题。该服务有一个由警报组件订阅的 BehaviorSubject
。基本上:
export class AlertMessagesService {
public alertStatus: BehaviorSubject<AlertMessage>;
public addAlert(msg: string = null, type: string = 'info') {
this.alertStatus.next({
show: true,
msg: msg,
type: type
});
}
}
这是显示警报的组件:
export class AlertMessages implements OnInit {
alerts: Array<AlertMessage> = [];
constructor(
private alertService: AlertMessagesService) {
}
ngOnInit() {
this.alertService.alertStatus.subscribe((alert: AlertMessage) => {
if(alert.show) {
this.alerts.push(alert);
}
});
}
}
希望对运行遇到这种情况的人有所帮助。
我有一个控制登录页面和警报(成功、错误、信息...)的登录组件。当我在页面中时,我可以毫无问题地显示警报,例如,通知用户无效凭据或通知页面正在更新。基本上,这些消息是绑定到前端的登录组件 class 中的变量:
export class Login {
error;
info;
}
现在当用户注销时我重定向到登录页面:
this.router.navigate(['/login']);
我想向用户显示一个警告,通知注销过程成功(实际上我将使用相同的逻辑来通知用户会话是否过期)。我在登录组件中创建了两个方法 class:
logout() {
this.authenticationService.logout()
.subscribe(response => {
this.logoutRedirect();
},
error => {
this.logoutRedirect();
});
}
logoutRedirect() {
this.authenticationService.removeUser();
this.info = 'Logout success';
this.router.navigate(['/login']);
}
除消息外一切正常。我相信它会发生,因为当用户被重定向时,使用了一个新的登录 class 而这个没有信息信息。
解决这个问题的最佳方法是什么:我会在我的应用程序中经常使用它,所以我想正确地使用它。
我使用服务解决了这个问题。该服务有一个由警报组件订阅的 BehaviorSubject
。基本上:
export class AlertMessagesService {
public alertStatus: BehaviorSubject<AlertMessage>;
public addAlert(msg: string = null, type: string = 'info') {
this.alertStatus.next({
show: true,
msg: msg,
type: type
});
}
}
这是显示警报的组件:
export class AlertMessages implements OnInit {
alerts: Array<AlertMessage> = [];
constructor(
private alertService: AlertMessagesService) {
}
ngOnInit() {
this.alertService.alertStatus.subscribe((alert: AlertMessage) => {
if(alert.show) {
this.alerts.push(alert);
}
});
}
}
希望对运行遇到这种情况的人有所帮助。