Firebase 角色认证 Angular

Question

I'm trying to create user authentication using Firebase.

I have two roles in my application: student and teacher which I add to a firebase collection named users upon registration where there is a field role.

My issue is that I want to redirect the student to a student-profile page and the teacher to a teacher profile page. I have two different forms, one for student's login and one for teacher's login.

When I enter the data of a teacher at the student login I want to receive the error as the user does not exist.

Now I don't get any errors, if I had only one form of login everything would work correctly, but I have two, so I want it to give me errors if the user is a teacher and logs in to students.

That's my login for students in my auth.service

    loginEmailStudent(email: string, pass: string) {
        return new Promise((resolve, reject) => {
            this.auth.signInWithEmailAndPassword(email, pass)
            .then( (user) => {
                this.afs.collection("users").ref.where("email","==", user.user.email).onSnapshot(snap => {
                    snap.forEach(userRef => {
                        if(userRef.data().role == "student"){
                            this.router.navigate(['/student/profile']);
                        } else {
                            //error                   
                        }
                    })
                })
            }).catch(err => console.log(reject(err)));
        });
    }

The same is for loginTeachers except the role. And this is in my auth component where submitting the form for students login.

onSubmit(form: NgForm) {
    if(!form.valid) {
      return
    }
    const email = form.value.email;
    const password = form.value.password;
    this.isLoading = true;
    if(this.isLoginMode) {
      this.authService.loginEmailStudent(email, password)
      .then( (res) => {
      this.isLoading = false;
      }).catch(errorRes => {
        console.log(errorRes);
        switch(errorRes.code) {
          case 'auth/user-not-found' :
            this.error = 'There is no existing user with this email address!';
            break;
          case 'auth/wrong-password' :
            this.error = 'The password is invalid!';
            break;
          case 'auth/invalid-email' :
            this.error = 'The email address is badly formatted!';
            break;
          default:
            this.error = 'An error occured!';
        }
        this.isLoading = false;
      });
    } else {
      this.authService.registerStudent(email, password)
      .then((res) => {
        this.isLoading = false;
        this.authService.isAuth().subscribe( student => {
          if(student) {
            student.updateProfile({
              displayName: '',
              photoURL: this.inputImageUser.nativeElement.value
            }).then( () =>  {
              this.onLoginStudentRedirect();
            }).catch( (error) => console.log('error', error));
          }
        });
      }).catch(errorRes => { 
        console.log(errorRes);
        switch(errorRes.code) {
          case 'auth/email-already-in-use' :
            this.error = 'The email address is already in use by another account!';
            break;
          case 'auth/invalid-email' :
              this.error = 'The email address is badly formatted!';
              break;
          default:
              this.error = 'An error occured!';
        }
        this.isLoading = false;
      });
    }
    form.reset();
  }

Answer 1

First option:

Why don't you have a simple login method for both student and teacher that will resolve to an object that has a property of either student or teacher.

On your onSubmit method you can deal with the error handling accordingly.

---

The second option

is to keep almost everything the same but instead of using the redirect ( this.router.navigate(['/student/profile']); ) in the login method you throw a specific error. And you catch that specific error inside onSubmit .