typescript - 当道具对象抛出错误时，浏览器中的Vue.js未捕获错误

Question

我有一个具有 UserService 属性的组件 Login.vue。UserService 由 FirebaseUserService 实现。

我的问题是，当我单击输入无效的按钮登录时，它会使 FirebaseUserService 中的登录方法引发错误（期望的行为）。

当错误出现在 Login.vue 组件时，将执行 catch 中的代码（期望的行为）。但是我的浏览器控制台中有一个错误，显示未捕获错误：错误消息（不需要的行为）。

我想知道为什么我有这个未捕获的错误，即使我有一个在 Login.vue 登录中执行的 catch 块。

PS 我尝试了一种引发 Login.vue 组件的方法，但没有出现未捕获的错误

登录.vue

<template>
  <div id="login">
    <b-row align-v="center" align-h="center">
      <b-col cols="12" sm="8" md="4">
        <b-card
          border-variant="primary"
          header="Login"
          header-text-variant="white"
          header-bg-variant="primary"
          align="center"
        >
          <b-form-input class="my-1" v-model="email" type="text" placeholder="Email"></b-form-input>
          <b-form-input class="my-1" v-model="password" type="password" placeholder="Password"></b-form-input>
          <b-button
            @click="signIn(email, password)"
            variant="primary"
            type="button"
            id="signInButton"
            class="my-1"
          >Login</b-button>
          <p class="text-danger" id="errorMessage" v-bind:value="errorMessage">{{errorMessage}}</p>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { UserService } from '../domain/user/UserService'

@Component
export default class Login extends Vue {
  @Prop() private userService!: UserService;
  email: string = '';
  password: string = '';
  errorMessage: string = '';

  async signIn(email: string, password: string): Promise<void> {
    try {
      await this.userService.signIn(email, password)
      this.$router.push('/profile')
    } catch (error) {
      this.errorMessage = error.message
    }
  }
}
</script>

用户服务.ts

export interface UserService {
  signIn: (email: string, password: string) => Promise<void>;
}

FirebaseUserService.ts

import firebase from 'firebase/app'
import Auth = firebase.auth.Auth

export class FirebaseUserService implements UserService {
  private readonly WRONG_PASSWORD_CODE: string = 'auth/wrong-password'
  private readonly WRONG_EMAIL_CODE: string = 'auth/user-not-found'
  private readonly INVALID_EMAIL_CODE: string = 'auth/invalid-email'
  private readonly USER_DISABLED_CODE: string = 'auth/user-disabled'

  private auth: Auth

  constructor(auth: Auth) {
    this.auth = auth
  }

  public async signIn(email: string, password: string): Promise<void> {
    await this.auth.signInWithEmailAndPassword(email, password).catch((error:any) => {
      if (error.code === this.WRONG_EMAIL_CODE) {
        throw new Error('Invalid Credential')
      }
      if (error.code === this.WRONG_PASSWORD_CODE) {
        throw new Error('Invalid Credential')
      }
      if (error.code === this.INVALID_EMAIL_CODE) {
        throw new Error('Invalid Email')
      }
      if (error.code === this.USER_DISABLED_CODE) {
        throw new Error('User disabled')
      }
    })
  }
}

标签： typescriptfirebasevue.jserror-handlingfirebase-authentication