Угловое шоу модальное при входе в систему, отправка и предотвращение перенаправления

Моя задача - показать модальный режим, когда пользователь нажимает 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();
 }
}

0 ответов

Другие вопросы по тегам