当前位置：首页 > VUE

vue实现登陆

2026-02-11 10:17:25VUE

使用 Vue 实现登录功能

创建登录表单组件

在 Vue 项目中创建一个登录表单组件，包含用户名和密码输入框以及提交按钮。使用 v-model 实现双向数据绑定，监听用户输入。

<template>
  <div>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

发送登录请求

在 handleLogin 方法中，使用 axios 或其他 HTTP 客户端向服务器发送登录请求。通常需要将用户名和密码作为请求体发送到后端 API。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      // 处理登录成功
    } catch (error) {
      // 处理登录失败
    }
  }
}

处理登录响应

根据后端返回的响应，处理登录成功或失败的情况。登录成功时，通常需要保存用户 token 并跳转到主页。

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      localStorage.setItem('token', response.data.token)
      this.$router.push('/home')
    } catch (error) {
      alert('登录失败，请检查用户名和密码')
    }
  }
}

路由守卫设置

为了保护需要登录才能访问的页面，可以在 Vue Router 中设置全局前置守卫，检查用户是否已登录。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

状态管理（可选）

对于大型应用，可以使用 Vuex 管理用户登录状态，而不是直接操作 localStorage。

const store = new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  }
})

错误处理和表单验证

添加表单验证逻辑，确保用户输入符合要求。可以使用 Vuelidate 或其他验证库。

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

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 发送请求
      }
    }
  }
}

样式优化

为登录表单添加 CSS 样式，提升用户体验。可以使用 CSS 或 UI 框架如 Element UI、Vuetify 等。

<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label>用户名</label>
        <input v-model="username" class="form-control" />
      </div>
      <div class="form-group">
        <label>密码</label>
        <input v-model="password" type="password" class="form-control" />
      </div>
      <button type="submit" class="btn btn-primary">登录</button>
    </form>
  </div>
</template>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
</style>

vue实现登陆