Vuejs：将错误消息显示为弹出窗口

Question

我使用 Vuex 和 Axios 创建了一个登录部分，通过允许用户输入电子邮件和密码来验证登录。我已经使用 getter 创建并存储了我需要的变量。我也将我需要的令牌放入函数中，发布 url 和控制台。

但是，知道我需要根据在检查器/控制台中看到的标记来显示响应。

我需要在用户尝试登录时显示错误消息。因此，当控制台响应显示 200（电子邮件和密码正确）时，我需要它来存储该令牌，当控制台响应显示 400（电子邮件或密码中不正确/缺少字符）时，我需要它打印出错误消息我已经放置了一个数组，最后，当控制台响应显示 401（电子邮件和密码都不正确）时，我需要它打印出数组中的 messageFour。

HTML：

<template>
<form>
    <div class="login">
        <div>
            <input type="text" v-model="email" placeholder="Email" class="eSection" id="email">

            <p v-for="message in errorM" :key="message.errorM" v-show="message in errorM">
                {{ message }}
            </p>

            <input type="password" v-model="password" placeholder="Password" class="pSection" id="password">

            <p v-for="message in errorM" :key="message.errorM">
                {{message}}
            </p>

            <button type="button"  class="log" @click="login">LogIn</button>
        </div>
    </div>
</form>
</template>

Javascript：

<script>
    import axios from 'axios';
export default {
    data() {
        return {
            email: "test@gmail.com",
            password: "123456",
            flag: false,
            errorM:[],

            errorMessages: [
                {
                    messageOne: "The email that has been entered is incorrect. Please try again!"
                },

                {
                    messageTwo: "Email/Password is missing. Please try again!"
                },

                {
                    messageThree: "The password that has been entered is incorrect. Please try again!"
                },

                {
                    messageFour: "Both Email and Password that have been entered are incorrect!"
                },
            ]
        }
    },

    methods: {
        login: function (index) {

            axios.post(`https://api.ticket.co/auth/login`, {
                    email: this.email,
                    password: this.password
                })

                .then(response => {
                    // JSON responses are automatically parsed.
                    console.log(response.data)
                    console.log(response.status)
                })

                .catch(e => {
                    console.log(e)
                    console.log(e.response.status)

                    var vueObject = this

                    switch (e.response.status) {
                    case 400:
                            if(!vueObject.email || !vueObject.password){
                                vueObject.errorM.push(vueObject.errorMessages.messageTwo)
                            };

                            if(!vueObject.email){
                                vueObject.errorM.push(vueObject.errorMessages.messageOne)
                            };

                            if(!vueObject.password){
                                vueObject.errorM.push(vueObject.errorMessages.messageThree)
                            };
                            break;

                        case 401:
                        if(vueObject.email && vueObject.password == ""){
                                vueObject.errorM.push(vueObject.errorMessages.messageFour)
                            }
                            break;
                    }
                })  
        },
    },
} 
</script>

非常感谢！

Answer 1

从描述中不清楚是什么不起作用，所以我只指出我看到的一些问题。

要提一提的是，没有证据表明你使用 vuex，没有 getter，没有 setter，没有 state。

最值得注意的是，您将消息定义为对象数组，这使得查找起来很困难

而不是这个，更难查找：

errorMessages: [
  {
    messageOne: "The email that has been entered is incorrect. Please try again!"
  },
  // etc... {}, {}, {}
]

...你应该这样做

errorMessages: {
  messageOne: "The email that has been entered is incorrect. Please try again!",
  messageTwo: "Email/Password is missing. Please try again!",
  messageThree: "The password that has been entered is incorrect. Please try again!",
  messageFour: "Both Email and Password that have been entered are incorrect!",
}

这样您就可以使用this.errorMessages.messageTwo找到消息

或者更好的是，在你的 vue 组件之外定义它，因为你没有在你的模板中使用它们

const MESSAGE_INCORRECTEMAIL = "The email that has been entered is incorrect. Please try again!";
const MESSAGE_MISSINGFIELD = "Email/Password is missing. Please try again!";
const MESSAGE_INCORRECTPASSWORD = "The password that has been entered is incorrect. Please try again!";
const MESSAGE_INCORRECTEMAILPASSWORD = "Both Email and Password that have been entered are incorrect!";

然后在您的脚本中将它们称为MESSAGE_MISSINGFIELD

从安全的角度来看，指示用户名或密码是否错误是一个坏主意，因为通过确认用户名的存在可以更容易地进行黑客攻击。

您可以在发送表单进行远程处理之前确定用户是否有错误或缺少字段。

要做到这一点，你会打电话给

login: function (index) {
  if (this.email.trim() === '' || vueObject.password.trim() === ''){
    this.errorM.push(MESSAGE_MISSINGFIELD);
    return // <- prevents further execution
  }
  // repeat for other local validations before remote request
  // ... then process request
  axios.post(`https://api.ticket.co/auth/login`, {

无论如何，您可能还不需要将您的问题分解为您遇到的各个错误。