Проблема с записью метода регистрации в программе Angular + NodeJS - PullRequest
Новая
       33

Проблема с записью метода регистрации в программе Angular + NodeJS

0 голосов
/ 14 апреля 2020

Я пытаюсь написать простой метод регистрации, и следующие коды являются кодами, которые я использовал:

ClientSide_codes, auth.servise.ts: 

   checkUserExistence(user : User) : any {
    this.http.get<UserResponse>(baseURL + 'users/findUser')
    .subscribe(res => {
      if(res.success){
        console.log('user founded!');
        return true;
      }
    },
    err => {
      console.log('A problem happened: ', err);
      this.destroyUserCredentials();
      return false;
    });
  }


   signUp(user: any): Observable<any> {
    if (this.checkUserExistence(user) === false) {
      return this.http.post<RegResponse>(baseURL + 'users/signup',
      {'username': user.username, 'password': user.password, 'firstname' : user.firstname, 'lastname': user.lastname})
      .pipe( map(res => {
          this.storeUser({username: user.username});
          return {'success': true, 'username': user.username };
      }),
       catchError(error => this.processHTTPMsgService.handleError(error)));

    }
    else{
      console.log('This user already exists!');
      return ;
    }

  }

signup.component.ts: 

export class SignupComponent implements OnInit {

  user = {username: '', password: '', firstname: '', lastname: '', remember: false};
  errMess: string;

  constructor(public dialogRef: MatDialogRef<SignupComponent>,
    private authService: AuthService) { }

  ngOnInit() {
  }

  onSubmit() {
    console.log('User: ', this.user);
    this.authService.signUp(this.user)
      .subscribe(res => {
        if (res.success) {
          this.dialogRef.close(res.success);
        } else {
          console.log(res);
        }
      },
      error => {
        console.log(error);
        this.errMess = error;
      });
  }

}

BackEnd-коды, usersRouter. js: 

usersRouter.post('/signup', cors.corsWithOptions, (req, res, next) => {
  User.register(new User({username: req.body.username}), 
    req.body.password,  (err, user) => {
    if(err) {
      res.statusCode = 500;
      res.setHeader('Content-Type', 'application/json');
      res.json({err: err});
    }
    else {
      user.password = req.body.password;
      if (req.body.firstname)
        user.firstname = req.body.firstname;
      if (req.body.lastname)
        user.lastname = req.body.lastname;
      if (req.body.admin)
        user.admin = req.body.admin;        
      user.save((err, user) => {
        if (err) {
          res.statusCode = 500;
          res.setHeader('Content-Type', 'application/json');
          res.json({err: err});
          return next(err);
        }
        passport.authenticate('local')(req, res, () => {
          res.statusCode = 200;
          res.setHeader('Content-Type', 'application/json');
          res.json({success: true, status: 'Registration Successful!'});
        });
      });
    }
  });
});

А когда я пытаюсь подписать нового пользователя и знаю, что пользователя не существует, он дает мне следующие ошибки: 

This user already exists!
core.js:5873 ERROR TypeError: Cannot read property 'subscribe' of undefined
    at SignupComponent.onSubmit (signup.component.ts:34)
    at SignupComponent_Template_form_ngSubmit_7_listener (signup.component.html:13)
    at executeListenerWithErrorHandling (core.js:21685)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21727)
    at SafeSubscriber.schedulerFn [as _next] (core.js:36900)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at EventEmitter.next (Subject.js:39)
defaultErrorLogger @ core.js:5873
handleError @ core.js:5926
handleError @ core.js:13548
executeListenerWithErrorHandling @ core.js:21688
wrapListenerIn_markDirtyAndPreventDefault @ core.js:21727
schedulerFn @ core.js:36900
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36819
onSubmit @ forms.js:6253
NgForm_submit_HostBindingHandler @ forms.js:6294
executeListenerWithErrorHandling @ core.js:21685
wrapListenerIn_markDirtyAndPreventDefault @ core.js:21727
(anonymous) @ platform-browser.js:934
invokeTask @ zone-evergreen.js:400
onInvokeTask @ core.js:41235
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:481
invokeTask @ zone-evergreen.js:1596
globalZoneAwareCallback @ zone-evergreen.js:1622
auth.service.ts:54 user founded!

1 Ответ

0 голосов
/ 14 апреля 2020

эта функция checkUserExistence(user) выполняет некоторую асинхронную задачу, и вы проверяете результат, возвращаемый ей

, поэтому, если условие if (this.checkUserExistence(user) === false) не проверено должным образом, переходит к другой части, которая имеет оператор return, но не возвращающий наблюдаемое для подписки в компоненте signUp

Я предлагаю вам определить новое свойство типа BehaviorSubject, и оно должно вернуть логическое значение, и дать ему начальное значение = false 

isUserExist = new BehaviorSubject<Boolean>(false);

checkUserExistence(user : User) : any {
    this.http.get<UserResponse>(baseURL + 'users/findUser')
    .subscribe(res => {
        if (res.success) {
            console.log('user founded!');
            // return true;
            this.isUserExist.next(true);
        }
    },
    err => {
    console.log('A problem happened: ', err);
        this.destroyUserCredentials();
        // return false;
        this.isUserExist.next(false);
    });
}

signUp(user: any): Observable<any> {
  return this.http.post<RegResponse>(baseURL + 'users/signup',
  {'username': user.username, 'password': user.password, 'firstname' : user.firstname, 'lastname': user.lastname})
  .pipe( map(res => {
      this.storeUser({username: user.username});
      return {'success': true, 'username': user.username };
  }),
    catchError(error => this.processHTTPMsgService.handleError(error)));
}

и проверьте, существует ли пользователь в компоненте, прежде чем вызывать метод регистрации из службы, поэтому вы будете вызывать его только в том случае, если пользователь не существует, тем самым вы избавитесь от него. возвращая ненаблюдаемый ответ от службы, поэтому вы будете выполнять регистрацию только в том случае, если пользователь не существует (и эту проверку необходимо выполнить в компоненте) 

onSubmit() {
  console.log('User: ', this.user);
  // subscribe to the behavior subject we defined and emitted in the service, If it's false, then do the signup
  this.authService.isUserExist.subscribe((userExists: Boolean) => {
    // call the signup method only if the userExists is not true
    if (!userExists) {
      this.authService.signUp(this.user)
      .subscribe(res => {
        if (res.success) {
          this.dialogRef.close(res.success);
        } else {
          console.log(res);
        }
      }, error => {
        console.log(error);
        this.errMess = error;
      });
    }
  });
}
...