当前位置：首页 > VUE

vue实现密码登录

2026-01-11 23:07:44VUE

Vue 实现密码登录功能

基础模板结构

使用 Vue 的模板语法构建登录表单，包含用户名、密码输入框和提交按钮：

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

数据绑定与验证

在 Vue 的 data 或 setup 中定义表单数据模型，并添加基础验证逻辑：

vue实现密码登录

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      error: null
    }
  },
  methods: {
    validateForm() {
      if (!this.form.username.trim()) {
        this.error = '请输入用户名'
        return false
      }
      if (this.form.password.length < 6) {
        this.error = '密码长度不能少于6位'
        return false
      }
      this.error = null
      return true
    }
  }
}
</script>

提交逻辑处理

实现表单提交方法，包含网络请求和结果处理：

methods: {
  async handleSubmit() {
    if (!this.validateForm()) return

    try {
      const response = await axios.post('/api/login', {
        username: this.form.username,
        password: this.form.password
      })
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      this.error = error.response?.data?.message || '登录失败'
    }
  }
}

密码显示切换功能

添加密码可见性切换功能提升用户体验：

vue实现密码登录

<div class="form-group">
  <label for="password">密码</label>
  <div class="password-input">
    <input
      :type="showPassword ? 'text' : 'password'"
      id="password"
      v-model="form.password"
      required
    />
    <button
      type="button"
      @click="showPassword = !showPassword"
    >
      {{ showPassword ? '隐藏' : '显示' }}
    </button>
  </div>
</div>

样式优化

添加基础样式提升视觉效果：

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
input {
  width: 100%;
  padding: 8px;
}
button[type="submit"] {
  background: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
}
.password-input {
  display: flex;
}
.error {
  color: red;
}
</style>

安全增强措施

实施额外的安全措施保护用户数据：

使用 HTTPS 协议传输数据
对密码进行前端加密处理（如 bcryptjs）
添加 CSRF 防护
实现请求限流防止暴力破解

import bcrypt from 'bcryptjs'

methods: {
  async handleSubmit() {
    const salt = bcrypt.genSaltSync(10)
    const hashedPassword = bcrypt.hashSync(this.form.password, salt)

    await axios.post('/api/login', {
      username: this.form.username,
      password: hashedPassword
    })
  }
}