当前位置：首页 > VUE

vue框架实现登录

2026-01-16 02:02:59VUE

Vue 框架实现登录功能

使用 Vue 框架实现登录功能需要结合前端和后端交互，以下是一个完整的实现方案。

创建登录表单

在 Vue 组件中创建登录表单，包含用户名和密码输入框。

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

定义数据和方法

在 Vue 组件的 script 部分定义登录表单的数据和登录方法。

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$axios.post('/api/login', this.loginForm)
        if (response.data.success) {
          localStorage.setItem('token', response.data.token)
          this.$router.push('/dashboard')
        }
      } catch (error) {
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

使用 Axios 发送请求

安装并配置 Axios 用于发送 HTTP 请求。

npm install axios

在项目的入口文件（如 main.js）中配置 Axios。

import axios from 'axios'
Vue.prototype.$axios = axios

后端接口对接

确保后端提供登录接口，接收用户名和密码，返回 token 或其他认证信息。

// 示例 Node.js 后端接口
app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  if (username === 'admin' && password === '123456') {
    res.json({ success: true, token: 'generated_token' })
  } else {
    res.status(401).json({ success: false, message: '用户名或密码错误' })
  }
})

路由守卫

使用 Vue Router 的路由守卫保护需要登录的页面。

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

样式优化

为登录表单添加基础样式，提升用户体验。

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

通过以上步骤，可以实现一个完整的 Vue 登录功能，包括表单处理、后端交互、路由保护和样式优化。

vue框架实现登录