当前位置：首页 > VUE

vue项目实现登录

2026-02-20 06:46:44VUE

Vue项目实现登录功能

准备工作

确保已安装Vue CLI和必要的依赖，如vue-router和axios。创建Vue项目后，设置路由和状态管理（如Vuex或Pinia）。

创建登录页面

在src/views目录下创建Login.vue文件，包含表单元素（用户名和密码输入框）和提交按钮。使用v-model绑定表单数据。

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  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('/dashboard')
      } catch (error) {
        console.error('登录失败', error)
      }
    }
  }
}
</script>

配置路由

在src/router/index.js中配置登录页面的路由，并设置路由守卫以保护需要认证的页面。

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'

const routes = [
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

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

export default router

后端API交互

使用axios发送登录请求到后端API，处理响应并存储token。示例中使用/api/login作为登录接口，实际需替换为真实API地址。

import axios from 'axios'

axios.defaults.baseURL = 'https://your-api-domain.com'
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

状态管理

对于更复杂的应用，建议使用Vuex或Pinia管理用户状态。创建store模块存储用户信息和登录状态。

// 使用Pinia示例
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    isAuthenticated: false
  }),
  actions: {
    login(userData) {
      this.user = userData
      this.isAuthenticated = true
    },
    logout() {
      this.user = null
      this.isAuthenticated = false
    }
  }
})

表单验证

添加客户端表单验证，确保输入符合要求。可以使用Vuelidate或手动验证。

// 手动验证示例
methods: {
  validateForm() {
    if (!this.username.trim()) {
      alert('请输入用户名')
      return false
    }
    if (this.password.length < 6) {
      alert('密码长度至少6位')
      return false
    }
    return true
  },
  async handleLogin() {
    if (!this.validateForm()) return
    // 其余登录逻辑
  }
}

错误处理

完善错误处理逻辑，显示友好的错误信息给用户。可以捕获网络错误和业务错误。

async handleLogin() {
  try {
    const response = await axios.post('/api/login', {
      username: this.username,
      password: this.password
    })
    // 成功处理
  } catch (error) {
    if (error.response) {
      // 服务器返回的错误
      alert(error.response.data.message || '登录失败')
    } else {
      // 网络错误
      alert('网络错误，请稍后重试')
    }
  }
}