Question

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

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

我需要的是在用户尝试登录时显示错误消息。因此，当控制台响应显示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，没有状态。

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

而不是这个，更难以查找：

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`, {

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

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

1 个答案: