未捕获（承诺）：FirebaseError

Question

我收到以下错误。我的问题是 NOT 与实际错误，而是说错误是 Uncaught。如果您查看我的 auth.service.ts 和 sign-in.component.ts 文件，我会发现错误。

我的问题是，为什么在控制台中出现 Error: Uncaught (in promise) 错误？我错过了什么？

我正在使用
"@angular/fire": "^7.0.4"
"firebase": "^9.0.2"
"rxjs": "6.6.7"

auth.service.ts

    /**
     * Sign in
     *
     * @param credentials
     */
    signIn(credentials: { email: string; password: string }): Promise<any> 
    {
        return this.auth.signInWithEmailAndPassword(credentials.email, credentials.password)
            .then((userCredential) => {
                
                // Signed in 
                const user = userCredential.user;
                //console.log(user);

                // Store the access token in the local storage
                userCredential.user.getIdToken().then(token => {
                    this.accessToken = token;
                    //console.log(token);
                })

                // Set the authenticated flag to true
                this._authenticated = true;

                // Store the user on the user service
                //this._userService.user = user;

                // ...
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.log('Show Error', error.code);
                throw errorCode;
            });
    }

登录.component.ts

    /**
     * Sign in
     */
    signIn(): void
    {
        // Return if the form is invalid
        if ( this.signInForm.invalid )
        {
            return;
        }

        // Disable the form
        this.signInForm.disable();

        // Hide the alert
        this.showAlert = false;

        // Sign in
        this._authService.signIn(this.signInForm.value)
            .then(
                () => {

                    // Set the redirect url.
                    // The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
                    // to the correct page after a successful sign in. This way, that url can be set via
                    // routing file and we don't have to touch here.
                    const redirectURL = this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || '/signed-in-redirect';

                    // Navigate to the redirect url
                    this._router.navigateByUrl(redirectURL);

                },
                (response) => {

                    console.log('error from auth.service', response);

                    // Re-enable the form
                    this.signInForm.enable();

                    // Reset the form
                    this.signInNgForm.resetForm();

                    // Set the alert
                    this.alert = {
                        type   : 'error',
                        message: 'Wrong email or password'
                    };

                    // Show the alert
                    this.showAlert = true;
                }
            );
    }

Answer 1

首先，我的母语不是英语，所以如果我写得像个傻瓜，你知道为什么。

试试这个：

_authService.service.ts

    import { getAuth, signInWithEmailAndPassword, Auth, inMemoryPersistence, browserLocalPersistence } from '@angular/fire/auth';


    constructor(private _fireAuth: Auth,) {

/**
 * Sign-in
 *
 * @param credentials
 * @param rememberMe
 */
    async signIn(credentials: { email: string; password: string }, rememberMe: boolean): Promise<any> {
        // firebase Persistence.LOCAL   browserLocalPersistence
        // firebase Persistence.SESSION browserSessionPersistence
        // firebase Persistence.NONE    inMemoryPersistence

        return new Promise(async (resolve, reject) => {
            //Initialize auth()
            const auth = getAuth();

            // Extra function
            if (rememberMe) {
                await getAuth().setPersistence(browserLocalPersistence).catch(error => reject(-1));
            } else {
                await getAuth().setPersistence(inMemoryPersistence).catch(error => reject(-1));
            }

            signInWithEmailAndPassword(auth, credentials.email, credentials.password).then(async (userCredential) => {
                // Signed in 
                const user = userCredential.user;
                console.log(user);

                // Store the access token in the local storage
                await userCredential.user.getIdTokenResult().then(token => {
                    this.accessToken = token.token;
                    console.log(token);
                })

                // Set the authenticated flag to true
                this._authenticated = true;
            }).catch(error => reject(error.code));
        });
    }

注意： 如您所见，我添加了一些额外功能，如果您不感兴趣，可以删除（setPersistence），这允许您考虑用户选择保持登录状态，如果他想要，或者在他关闭标签时删除他的登录信息。

sign-in.component.ts

alert = {
        userNotFound : false,
        wrongPassword: false,
        unknownError : false,
};
    /**
     * Sign in
     */
    signIn(): void
    {
        // Return if the form is invalid
        if ( this.signInForm.invalid )
        {
            return;
    }

    // Disable the form
    this.signInForm.disable();

    // Hide the alert
    this.showAlert = false;

    // Sign in
    this._authService.signIn(this.signInForm.value)
        .then(
            () => {

                // Set the redirect url.
                // The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
                // to the correct page after a successful sign in. This way, that url can be set via
                // routing file and we don't have to touch here.
                const redirectURL = this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || '/signed-in-redirect';

                // Navigate to the redirect url
                this._router.navigateByUrl(redirectURL);

            },
            (response) => {

                console.log('error from auth.service', response);

                // Re-enable the form
                this.signInForm.enable();

                // Reset the form
                this.signInNgForm.resetForm();

                // Set the alert
                if (error === - 1) {
                this.alert.unknownError = true;
                } else if (error === 'auth/email-not-found' || error === 'auth/user-not-found') {
                this.alert.userNotFound = true;
                } else if (error === 'auth/wrong-password') {
                this.alert.wrongPassword = true;
                }
            }
        );
}

Answer 2

正如弗兰克提到的那样，您正在抛出一个错误而没有在更高的水平上将其恢复，我会尝试这样做：

try {
  this._authService.signIn(this.signInForm.value)
            .then(
                () => {

                    // Set the redirect url.
                    // The '/signed-in-redirect' is a dummy url to catch the request and redirect the user
                    // to the correct page after a successful sign in. This way, that url can be set via
                    // routing file and we don't have to touch here.
                    const redirectURL = this._activatedRoute.snapshot.queryParamMap.get('redirectURL') || '/signed-in-redirect';

                    // Navigate to the redirect url
                    this._router.navigateByUrl(redirectURL);

                },
                (response) => {

                    console.log('error from auth.service', response);

                    // Re-enable the form
                    this.signInForm.enable();

                    // Reset the form
                    this.signInNgForm.resetForm();

                    // Set the alert
                    this.alert = {
                        type   : 'error',
                        message: 'Wrong email or password'
                    };

                    // Show the alert
                    this.showAlert = true;
                }
            );
} catch(e) {}

只需用try catch 块包围您的代码，这样错误就会被忽略。我没有测试它，但也许在then 之后调用另一个catch 方法可以解决问题，但它仍然处于同一级别（承诺级别），所以我不确定它是否会起作用。