<template> <div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="top"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login">登录</el-button> </el-form-item> </el-form> </div> </template> <script> import { login } from '@/api'; export default { name: 'LoginPage', data() { return { loginForm: { username: '', password: '' }, loginRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } }; }, methods: { login() { this.$refs.loginForm.validate(valid => { if (valid) { // 登录逻辑，可以发送请求到后端进行验证 const { username, password } = this.loginForm; // 修改这里 console.log(username, password); login(username, password) .then(response => { // 登录成功，处理响应 console.log(response.data); // 进行其他操作，例如跳转到其他页面 localStorage.setItem('token', response.data.token); this.$router.push('/'); }) .catch(error => { // 登录失败，处理错误 console.error(error); // 进行错误提示或其他操作 }); console.log('登录成功'); // 登录成功后跳转到首页 } else { console.log('表单验证失败'); } }); } } }; </script> <style scoped> .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style> 如何返回401就提示一个用户名或者密码错误的信息怎么改

要在登录失败时返回 401 并提示用户名或密码错误的信息，可以在登录失败的 catch 块中进行处理。可以使用 Element UI 的 Message 组件来显示错误信息。

以下是修改后的代码示例：

// 导入 Message 组件
import { Message } from 'element-ui';

// ...

methods: {
  login() {
    this.$refs.loginForm.validate(valid => {
      if (valid) {
        const { username, password } = this.loginForm;
        console.log(username, password);
        login(username, password)
          .then(response => {
            // 登录成功，处理响应
            console.log(response.data);
            localStorage.setItem('token', response.data.token);
            this.$router.push('/');
          })
          .catch(error => {
            // 登录失败，处理错误
            console.error(error);
            if (error.response && error.response.status === 401) {
              // 返回 401，提示用户名或密码错误
              Message.error('用户名或密码错误');
            } else {
              // 其他错误，提示通用错误信息
              Message.error('登录失败，请稍后重试');
            }
          });
      } else {
        console.log('表单验证失败');
      }
    });
  }
}

在上述代码中，通过判断错误对象的 `response.status` 是否为 401，来确定是否返回了用户名或密码错误。如果是 401，则使用 Element UI 的 Message 组件显示错误信息。如果不是 401，则显示一个通用的登录失败信息。

请确保你已经正确导入了 Element UI 的 Message 组件，并在 Vue 实例中正确注册了 Element UI。

希望能够帮助到你！如果还有其他问题，请随时提问。