vue实现登录注册6

以下是一个基于Vue 3的登录注册实现方案，包含核心功能模块和代码示例：

路由配置

在router/index.js中配置登录和注册路由：

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue')
  }
]

登录组件

创建Login.vue文件：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="email" type="email" placeholder="Email" required>
    <input v-model="password" type="password" placeholder="Password" required>
    <button type="submit">Login</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const email = ref('')
const password = ref('')
const router = useRouter()

const handleLogin = async () => {
  try {
    // 这里替换为实际的API调用
    const response = await fakeAuthAPI({ email, password })
    localStorage.setItem('token', response.token)
    router.push('/dashboard')
  } catch (error) {
    alert(error.message)
  }
}
</script>

注册组件

创建Register.vue文件：

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="name" placeholder="Full Name" required>
    <input v-model="email" type="email" placeholder="Email" required>
    <input v-model="password" type="password" placeholder="Password" required>
    <input v-model="confirmPassword" type="password" placeholder="Confirm Password" required>
    <button type="submit">Register</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const name = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const router = useRouter()

const handleRegister = async () => {
  if (password.value !== confirmPassword.value) {
    alert("Passwords don't match")
    return
  }

  try {
    // 这里替换为实际的API调用
    await fakeRegisterAPI({ name, email, password })
    router.push('/login')
  } catch (error) {
    alert(error.message)
  }
}
</script>

状态管理

创建authStore.js使用Pinia：

import { defineStore } from 'pinia'

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

路由守卫

在路由配置中添加全局前置守卫：

router.beforeEach((to) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && to.name !== 'Register' && !isAuthenticated) {
    return { name: 'Login' }
  }
})

API模拟函数

创建api/auth.js模拟后端接口：

export const fakeAuthAPI = ({ email, password }) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (email === 'test@example.com' && password === 'password') {
        resolve({ token: 'fake-jwt-token' })
      } else {
        reject(new Error('Invalid credentials'))
      }
    }, 500)
  })
}

export const fakeRegisterAPI = ({ name, email, password }) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ success: true })
    }, 500)
  })
}

该实现包含表单验证、状态管理、路由保护和基本的错误处理。实际项目中需要替换模拟API为真实的后端接口调用，并添加更完善的验证逻辑和安全措施。