当用户尝试使用错误的凭据登录时，我应该返回什么响应？如何指示前端的凭据是错误的？

如何解决当用户尝试使用错误的凭据登录时，我应该返回什么响应？如何指示前端的凭据是错误的？

我有一个前端和后端分离的应用程序，我试图找出两件事：

1. 当用户尝试使用错误的凭据登录时，我应该返回什么响应
2. 返回响应后，如何向用户指示他使用的凭据错误

现在，我具有用于登录用户的以下功能。如果使用该电子邮件的用户不存在，我将发送401响应。如果存在用户，我将检查他的密码是否正确，如果是，我将返回200响应以及所有数据。如果密码不正确，我将发送401响应。

module.exports.loginUser = async (req,res,next) => {
    let email = req.body.email
    let password = req.body.password

    let userExists = await User.findOne({
        where: {
            email: email
        }
    })

    if (userExists) {
        bcrypt.compare(password,userExists.password,(error,result) => {
            if (result) {
                let token = jwt.sign({ id: userExists.id,email: userExists.email },'secretkey')
                res.status(200).json({
                    message: 'Authentication succeeded',username: userExists.username,userId: userExists.id,token: token
                })
            } else {
                res.status(401).json({
                    message: 'Authentication failed'
                })
            }
        })
    } else {
        res.status(401).json({
            message: 'Authentication failed'
        })
    }

}

在前端，我有一个包含以下代码的登录视图：

<template lang="html">
    <div class="register">
        <div class="register-container">
            <p>Welcome back!</p>
            <form @submit.prevent="onSubmit" novalidate>
                <div class="margin-bottom-20">
                    <p>Email</p>
                    <input v-model='email' type='email'>
                </div>
                <div class="margin-bottom-20">
                    <p>Password</p>
                    <input v-model='password' type="password">
                </div>
                <button type="submit" name="button">Continue</button>
            </form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data(){
        return {
            email: '',password: '',}
    },methods: {
        onSubmit(){
            let userInfo = {
                password: this.password,email: this.email
            }
            this.$store.dispatch('login',userInfo)
        }
    }
}
</script>

还有我的商店：

const store = new Vuex.Store({
    state: {
        token: null,username: null,userId: null,},mutations: {
        authUser(state,userData){
            state.token = userData.token
            state.userId = userData.userId
            state.username = userData.username
            localStorage.setItem('token',userData.token);
            localStorage.setItem('userId',userData.userId);
            localStorage.setItem('username',userData.username);
        }
    },actions: {
        login({commit,dispatch},userInfo){
            axios.post('/login',userInfo)
            .then(response => {
                commit('authUser',{
                    token: response.data.token,userId: response.data.userId,username: response.data.username
                })
                router.replace('/')
            }).catch((error) => console.log(error));
        },}
}

现在，我不太确定如何正确，干净地向前端添加功能，如果用户添加了错误的凭据，则会导致错误。为了在前端呈现错误，我必须在响应中从后端向前端发送一些东西，以表明发生了错误。可悲的是，我不确定应该发送什么。

解决方法

1. 来自this answer：

正确的HTTP代码实际上是401。来自RFC：

401（未经授权）状态码表示该请求尚未应用，因为它缺少目标资源的有效身份验证凭据。产生401响应的服务器必须发送WWW-Authenticate头域（4.1节），该域包含至少一个适用于目标资源的质询。如果请求包括身份验证凭据，则401响应指示已拒绝这些凭据的授权。用户代理可以使用新的或替换的Authorization标头字段（第4.2节）重复请求。

1. 通过在axios上检查客户端的响应代码，例如：

axios.post('/login',userInfo)
            .then(response => {
                if (response.code === 401) {
                    // Incorrect credential
                    showErrorMessage(); // implement this
                } else {
                    // Correct credential
                    commit('authUser',{
                        token: response.data.token,userId: response.data.userId,username: response.data.username
                    })
                    router.replace('/')
                }
            }).catch((error) => console.log(error));

请记住，默认情况下，如果响应代码不是status >= 200 && status < 300，则Axios将抛出错误，如果要防止这种情况，则需要更改axios默认值：

axios.defaults.validateStatus = function() {
  return true; // this wont throw error whatever the response code is
  // the default is `return status >= 200 && status < 300;`
};