Угловое шоу модальное при входе в систему, отправка и предотвращение перенаправления
Моя задача - показать модальный режим, когда пользователь нажимает submit-login на странице входа. Следует проверить погоду этого пользователя уже зарегистрированным на тестовом сервере и сообщить ему, что он есть. Так что если нет, то никаких модальных показов. Если он есть - это должно предотвратить перенаправление, прежде чем он нажмет кнопку ОК на модальном. Я делаю это dialogCong.disableClose = true. Теперь у меня такое поведение, что модал начинает загружаться на странице входа в систему, но отображается только на следующей странице после перенаправления, а это не то, что мне нужно. Не могли бы вы дать мне несколько советов, как сделать это правильно?
login.component.ts
login() {
this.errorMsg = '';
this._authService.login( this.user )
.takeUntil( this.destroy$ ).subscribe(
( response ) => {
if ( response['is_on_test'] ) {
this.showModal();
}
if ( this.redirect ) {
const url = this._route.snapshot
.queryParams[ 'returnUrl' ] || '/';
this._router.navigate( [ url ] );
}
},
( rejection ) => {
if ( rejection && rejection
.hasOwnProperty( 'error' ) && rejection.error.non_field_errors ){
for ( const error in rejection.error.non_field_errors ) {
if ( rejection.error.non_field_errors
.hasOwnProperty( error )) {
this.errorMsg = rejection.error.non_field_errors[ error ];
}
}
}
});
}
public showModal() {
const dialogConf = new MatDialogConfig();
dialogConf.disableClose = true;
dialogConf.position = {
'top': '50'
};
this.dialog.open(UserModalComponent, dialogConf);
}
и user.service.ts
public login( user: User ): Observable<any> {
return Observable.concat(
this.request( {
'method': 'POST',
'url': '/login/',
'body': {
username: user.username,
password: user.password
}
}),
this.getUserData()
);
}
getUserData(): Observable<any> {
return this.request( {
'url': '/user/'
} ).do(
( user ) => {
if ( user ) {
this.user = user;
}
}
).catch(
( rejection ) => {
this.user = null;
return Observable.throw( rejection );
}
);
}
и user-modal.component.ts
export class UserModalComponent implements OnInit {
constructor(private dialogRef: MatDialogRef<any>,
private _router: Router,
private _route: ActivatedRoute) {}
ngOnInit() {
}
public closeDialog() {
const url = this._route.snapshot.queryParams['returnUrl'] || '/';
this._router.navigate( [ url ] );
this.dialogRef.close();
}
}