问题描述
我正在开发Ionic 5 /角形贴合,但无法使用注销功能。
注销后,将显示登录页面,但不能使用输入用户名和密码的输入(不会从键盘上输入任何内容)
组件中的注销方法是:
login(form){
this.authService.login(form.value);
this.authService.currentUser.subscribe(
(data)=>{
console.log(data);
if(data) {this.router.navigateByUrl('home')}
else {
this.router.navigateByUrl('/login')
}
},(error) => {throw Error(error)}
);
}
我正在使用behaviorSubject跟踪服务中已登录用户:
private _currentUser: BehaviorSubject<UserLogueado> = new BehaviorSubject(null);
currentUser = this._currentUser.asObservable();
constructor(private hashingService: HashingService,private router: Router,private http: HttpClient) { }
encriptarContrasenia(contrasenia: string): string {
return this.hashingService.hashearString(contrasenia);
}
private setSession(authResult) {
//const expiresAt = moment().add(authResult.expiresIn,'second');
localStorage.setItem('auth_token',authResult.token);
localStorage.setItem('auth_Refresh_token',authResult.refreshToken);
}
login(usuarioFromForm) {
var usuario;
var dataToken;
this.http.post<any>(environment.UrlBaseApi +'Authenticate/Login',{ username: usuarioFromForm.email,password: this.encriptarContrasenia(usuarioFromForm.password) },{headers: new HttpHeaders({ 'Content-Type': 'application/json' })})
.subscribe(
data => {
console.log(data)
dataToken = data
this.setSession(data)
this.obtenerDetalleUsuario(usuarioFromForm.email).subscribe(
data=>{
usuario = data;
//this._currentUser = new BehaviorSubject(usuario)
/* this._currentUser.isstopped = false;
this._currentUser.closed = false; */
//this._currentUser.lift()
this._currentUser.next(usuario);
},(error) => {
throw error
}
)
},(error) => {
throw error
}
)
}
getUserSubject() {
return this._currentUser.asObservable();
}
isLoggedIn() {
return !!this._currentUser.value;
}
obtenerDetalleUsuario(usuario: string): Observable<any>{
return this.http.get<any>(environment.UrlBaseApi + `Authenticate/user/${usuario}`);
}
logout() {
localStorage.removeItem('auth_token')
localStorage.removeItem('auth_Refresh_token')
this.router.navigate(['/login'])
this._currentUser.next(null);
}
有什么建议吗?
编辑:
this._currentUser.next(null);
应用程序导航到登录页面并输入工作。但是由于菜单和标题取决于主题,所以会显示它们。
关于如何修复主题的任何建议?
解决方法
由于currentUser
是可观察的,因此它应与AsyncPipe一起使用以便订阅并接收其内部值,如下所示:
<app-menu *ngIf="currentUser | async">
,
组件销毁后,您是否要取消订阅this.authService.currentUser
?
组件代码:
destroyed$ = new Subject();
this.authService.currentUser.pipe(
takeUntil(this.destroyed$)
).subscribe(...)
ngOnDestroy() {
this.destroyed$.next();
this.destroyed$.complete();
}