当前位置：首页 > VUE

vue登录注册实现

2026-03-28 16:44:13VUE

实现Vue登录注册功能

在Vue项目中实现登录注册功能需要前后端配合，以下是基于Vue 3和axios的完整实现方案：

前端实现

安装必要依赖：

npm install axios vue-router pinia

创建authStore存储状态（使用Pinia）：

vue登录注册实现

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

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

创建登录组件：

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

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

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

const handleLogin = async () => {
  try {
    await authStore.login({
      email: email.value,
      password: password.value
    })
    router.push('/dashboard')
  } catch (error) {
    console.error('Login failed:', error)
  }
}
</script>

后端API示例（Node.js Express）

// server.js
const express = require('express')
const jwt = require('jsonwebtoken')
const app = express()

app.use(express.json())

const users = []

app.post('/api/register', (req, res) => {
  const { email, password } = req.body
  const user = { id: users.length + 1, email, password }
  users.push(user)

  const token = jwt.sign({ userId: user.id }, 'your-secret-key', { expiresIn: '1h' })
  res.json({ token })
})

app.post('/api/login', (req, res) => {
  const { email, password } = req.body
  const user = users.find(u => u.email === email && u.password === password)

  if (!user) return res.status(401).json({ error: 'Invalid credentials' })

  const token = jwt.sign({ userId: user.id }, 'your-secret-key', { expiresIn: '1h' })
  res.json({ token })
})

路由保护

添加路由守卫保护需要认证的页面：

vue登录注册实现

// router.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.token) {
    return '/login'
  }
})

表单验证

使用VeeValidate进行表单验证：

npm install vee-validate @vee-validate/rules

示例验证配置：

import { defineRule, configure } from 'vee-validate'
import { required, email, min } from '@vee-validate/rules'

defineRule('required', required)
defineRule('email', email)
defineRule('min', min)

configure({
  validateOnInput: true,
})