Question

我正在使用Vuetify实现一个简单的登录身份验证表单（在使用Vuetify和axios进行数据消耗方面，我确实是新手）。如果username=password，我正在使用的虚拟测试API返回200响应，如果username < password，则返回401响应，如果username > password，则返回404。

我已经实现了404响应状态，如果错误响应为404，并且响应为200，则会抛出ALERT('USER NOT FOUND')，它将重定向我/将我登录到首页。

如果使用vuetify的错误响应状态代码为401，我需要在用户名和密码字段中显示一些注释/突出显示（工具提示）。

methods: {
  /*  errorFn() {
        if (this.username.length < this.password.length) {
          document.getElementById("usepass").style.borderBottomColor = "red";
          return true;
        }
      }, */
  login: function() {
    var bodyFormData = new FormData()
    bodyFormData.set('username', this.username)
    bodyFormData.set('password', this.password)
    bodyFormData.set('client_id', 'WraptiousArtistApp')
    bodyFormData.set(
      'redirect_url',
      'https://dorothy2.wraptious.com/api/v0.1/users/me',
    )
    const headers = {
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    }
    if (this.username == '' && this.password == '') {
      this.$v.$touch()
    } else if (this.username != '' && this.password != '') {
      return axios
        .post(URL, bodyFormData, headers)
        .then(response => console.log(response))
        .then(() => this.$router.push('/home'))
        .catch(err => {
          // if username < password { highlight comments in username and password fields }
          if (err.response.status == 401) {
            alert(err.response.data.message)
            console.log(err.response)
            /* document.getElementById("userpass").style.borderColor = "red"; 
                this.errorFn();*/
          }
          // if username > password { throw a 404: User not found message }
          if (err.response.status == 404) {
            alert(err.response.data.message)
            console.log(err.response.data.code, 'User not Found')
          }
        })
    }
  },
},

<v-form>
    <v-text-field
      :error-messages="usernameError"
      :rules="usernameRules"
      :counter="10"
      required
      label="Username"
      v-model="username"
      name="username"
      prepend-icon="person"
      type="text"
      @input="$v.username.$touch()"
      @blur="$v.username.$touch()"
    ></v-text-field>
    <v-text-field
      :error-messages="passwordError"
      :counter="5"
      required
      v-model="password"
      label="Password"
      name="password"
      prepend-icon="lock"
      type="password"
      @input="$v.password.$touch()"
      @blur="$v.password.$touch()"
    ></v-text-field>
  </v-form>

Answer 1

如我所见，您已经定义了用于显示文本字段错误的数据属性：passwordError和usernameError。然后您将它们通过error-messages道具，

将输入置于错误状态并传递自定义错误消息。将与从规则道具该字段不会触发验证

因此，在您的处理程序中，只需为此属性分配适当的错误即可。

if (err.response.status == 401) {
  this.passwordError = 'Your password is invalid :('
}
if (err.response.status == 404) {
  this.usernameError = 'User not found'    
}

如何获取API响应状态代码以突出显示v文本字段

1 个答案: