Question

当用户在登录页面中输入错误的凭据时，我一直在尝试返回警报。

我使用的代码如下：

<template>
    <v-row justify="center">
        <v-col md="4">
            <v-card elevation="2">
                <v-card-title>Login</v-card-title>
                <v-card-text>
                    <v-form
                    ref="form"
                    v-model="valid"
                    lazy-validation
                    >
                        <v-text-field
                            v-model="email"
                            :rules="emailRules"
                            label="Email"
                            outlined
                            required 
                        >
                        </v-text-field>

                        <v-text-field
                            v-model="password"
                            :rules="passwordRules"
                            label="Password"
                            outlined
                            required
                            :type="show ? 'text' : 'password'"
                            @click:append="show = !show"
                            :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                        >
                        </v-text-field>

                        <v-btn
                            elevation="2"
                            color="primary"
                            @click="login"
                        >
                            Login
                        </v-btn>
                    </v-form>

                    <p class="pt-2">Create an account? <router-link :to="{ name: 'Register' }">Register</router-link></p>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>               
</template>

<script>
export default {
    data() {
        return {
            show: false,
            valid: false,
            email: '',
            password: '',
            emailRules: [
                v => !!v || 'Email is required',
                v => /.+@.+/.test(v) || 'Email must be valid'
            ],
            passwordRules: [
                v => !!v || 'Password is required',
                v => v.length >= 8 || 'Password must be 8 characters or more'
            ]
        }
    },
    methods: {
        login() {
            const valid = this.$refs.form.validate()
            if(valid){
                this.$store.dispatch('login', {
                    email: this.email,
                    password: this.password
                })
            }
        }
    }
}
</script>

我一直在使用 google firebase 和 vuetify 来创建前端并在后端存储用户信息。当用户输入错误的密码/电子邮件时，控制台会记录如下错误：

Uncaught (in promise) t {code: "auth/user-not-found", message: "没有与此标识符对应的用户记录。该用户可能已被删除。", a: null}

我想将此消息显示为警报，但不知道如何操作。如果有人可以提供帮助，那将不胜感激。

Answer 1

this.$store.dispatch 返回一个 Promise，显然是向后端服务器发出请求，后者返回错误的即非 200 响应代码。然后承诺被后端返回的错误拒绝。通过捕获任何拒绝，您可以更顺利地处理它们，例如

this.$store.dispatch('login', {
  email: this.email,
  password: this.password
})
  .then((res) => { // do things on success })
  .catch((err) => { // do things on error });

我正在尝试显示输入错误凭据的警报，但只显示在控制台中

1 个答案: