vue 实现简单登录

实现简单登录功能

在Vue中实现简单登录功能通常需要结合表单验证、状态管理和API请求。以下是一个基于Vue 3和Composition API的实现方案：

创建登录组件

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

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const form = ref({
  username: '',
  password: ''
})
const loading = ref(false)
const error = ref(null)

const handleSubmit = async () => {
  try {
    loading.value = true
    error.value = null
    await authStore.login(form.value)
    router.push('/dashboard')
  } catch (err) {
    error.value = err.message || '登录失败'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.error {
  color: red;
}
</style>

设置Pinia状态管理

创建auth store来管理登录状态：

// stores/auth.js
import { defineStore } from 'pinia'
import { api } from '@/api'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    isAuthenticated: false
  }),
  actions: {
    async login(credentials) {
      try {
        const response = await api.post('/login', credentials)
        this.user = response.data.user
        this.isAuthenticated = true
        localStorage.setItem('token', response.data.token)
      } catch (error) {
        throw new Error(error.response?.data?.message || '登录失败')
      }
    },
    logout() {
      this.user = null
      this.isAuthenticated = false
      localStorage.removeItem('token')
    }
  }
})

配置路由守卫

在路由配置中添加导航守卫保护需要认证的页面：

// router/index.js
import { createRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = createRouter({
  // 路由配置
})

router.beforeEach((to) => {
  const authStore = useAuthStore()
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    return '/login'
  }
})

封装API请求

创建统一的API请求工具：

// api/index.js
import axios from 'axios'

const api = axios.create({
  baseURL: 'https://your-api-endpoint.com/api',
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器
api.interceptors.response.use(
  (response) => response.data,
  (error) => {
    return Promise.reject(error)
  }
)

export { api }

添加表单验证

可以使用Vuelidate或手动验证：

// 手动验证示例
const validateForm = () => {
  if (!form.value.username.trim()) {
    error.value = '请输入用户名'
    return false
  }
  if (!form.value.password) {
    error.value = '请输入密码'
    return false
  }
  return true
}

const handleSubmit = async () => {
  if (!validateForm()) return
  // 其余登录逻辑
}

这个实现包含了登录功能的核心要素：表单处理、状态管理、API交互和路由保护。根据实际需求可以进一步扩展，如添加记住我功能、验证码或第三方登录等。