用vue实现登录

实现登录功能的基本步骤

在Vue中实现登录功能通常需要结合前端和后端交互，以下是一个基于Vue 3和axios的典型实现方案。

创建登录表单组件

在Vue组件中构建登录表单，包含用户名和密码输入框以及提交按钮。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

处理登录逻辑

添加登录方法，通过axios向后端API发送请求。

<script>
import axios from 'axios'

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) {
        alert('登录失败: ' + error.response.data.message)
      }
    }
  }
}
</script>

添加表单验证

使用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) {
        alert('请填写正确的表单信息')
        return
      }
      // 继续登录逻辑
    }
  }
}

路由保护

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

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

状态管理

对于更复杂的应用，可以使用Vuex或Pinia管理登录状态。

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

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: localStorage.getItem('token') || null,
    user: null
  }),
  actions: {
    async login(credentials) {
      const response = await axios.post('/api/login', credentials)
      this.token = response.data.token
      localStorage.setItem('token', this.token)
    },
    logout() {
      this.token = null
      localStorage.removeItem('token')
    }
  }
})

错误处理和加载状态

添加加载状态和更好的错误处理提升用户体验。

methods: {
  async handleLogin() {
    this.loading = true
    this.error = null

    try {
      await this.authStore.login({
        username: this.username,
        password: this.password
      })
      this.$router.push('/dashboard')
    } catch (error) {
      this.error = error.response?.data?.message || '登录失败'
    } finally {
      this.loading = false
    }
  }
}

完整组件示例

<template>
  <form @submit.prevent="handleLogin">
    <div v-if="error" class="error">{{ error }}</div>
    <div>
      <label for="username">用户名</label>
      <input 
        id="username" 
        v-model="username" 
        type="text" 
        required
        :disabled="loading"
      >
    </div>
    <div>
      <label for="password">密码</label>
      <input 
        id="password" 
        v-model="password" 
        type="password" 
        required
        :disabled="loading"
      >
    </div>
    <button type="submit" :disabled="loading">
      {{ loading ? '登录中...' : '登录' }}
    </button>
  </form>
</template>

<script>
import { mapActions } from 'pinia'
import { useAuthStore } from '@/stores/auth'

export default {
  data() {
    return {
      username: '',
      password: '',
      loading: false,
      error: null
    }
  },
  methods: {
    ...mapActions(useAuthStore, ['login']),
    async handleLogin() {
      this.loading = true
      this.error = null

      try {
        await this.login({
          username: this.username,
          password: this.password
        })
        this.$router.push('/dashboard')
      } catch (error) {
        this.error = error.response?.data?.message || '登录失败'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>