当前位置：首页 > VUE

vue实现密码登录

2026-03-26 20:30:20VUE

Vue实现密码登录功能

在Vue中实现密码登录功能需要结合表单验证、状态管理和API请求。以下是具体实现方法：

vue实现密码登录

创建登录表单组件

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label for="username">用户名</label>
      <input 
        id="username" 
        v-model="form.username" 
        type="text" 
        required
      >
    </div>
    <div>
      <label for="password">密码</label>
      <input 
        id="password" 
        v-model="form.password" 
        type="password" 
        required
      >
    </div>
    <button type="submit">登录</button>
  </form>
</template>

设置表单数据和验证

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    validateForm() {
      return this.form.username && this.form.password
    }
  }
}
</script>

处理登录提交

<script>
export default {
  methods: {
    async handleSubmit() {
      if (!this.validateForm()) {
        alert('请填写完整信息')
        return
      }

      try {
        const response = await this.$axios.post('/api/login', this.form)
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        alert('登录失败: ' + error.response.data.message)
      }
    }
  }
}
</script>

添加密码显示切换功能

<template>
  <div>
    <input 
      :type="showPassword ? 'text' : 'password'" 
      v-model="form.password"
    >
    <button @click="showPassword = !showPassword">
      {{ showPassword ? '隐藏' : '显示' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPassword: false
    }
  }
}
</script>

使用Vuelidate进行表单验证

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) }
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (this.$v.$invalid) return
      // 提交逻辑
    }
  }
}

添加加载状态

<template>
  <button :disabled="isLoading">
    {{ isLoading ? '登录中...' : '登录' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    async handleSubmit() {
      this.isLoading = true
      try {
        // API调用
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>