vue实现注册登录
Vue 实现注册登录功能
项目结构准备
创建一个 Vue 项目，安装必要依赖（如 Vue Router、Axios）。推荐使用 Vue CLI 或 Vite 初始化项目。
npm create vue@latest my-project
cd my-project
npm install axios vue-router路由配置
在 src/router/index.js 中配置登录和注册页面的路由：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'
const routes = [
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router注册功能实现
创建 Register.vue 组件，包含表单和提交逻辑：
<template>
<form @submit.prevent="handleRegister">
<input v-model="form.username" placeholder="用户名" />
<input v-model="form.email" placeholder="邮箱" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">注册</button>
</form>
</template>
<script setup>
import { reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()
const form = reactive({
username: '',
email: '',
password: ''
})
const handleRegister = async () => {
try {
const response = await axios.post('/api/register', form)
if (response.data.success) {
router.push('/login')
}
} catch (error) {
console.error('注册失败:', error)
}
}
</script>登录功能实现
创建 Login.vue 组件，包含登录表单和逻辑：
<template>
<form @submit.prevent="handleLogin">
<input v-model="form.email" placeholder="邮箱" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script setup>
import { reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()
const form = reactive({
email: '',
password: ''
})
const handleLogin = async () => {
try {
const response = await axios.post('/api/login', form)
if (response.data.success) {
localStorage.setItem('token', response.data.token)
router.push('/dashboard')
}
} catch (error) {
console.error('登录失败:', error)
}
}
</script>状态管理（可选）
对于更复杂的应用，可以使用 Pinia 管理用户状态：
// stores/auth.js
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
isAuthenticated: false
}),
actions: {
async login(credentials) {
const response = await axios.post('/api/login', credentials)
this.user = response.data.user
this.isAuthenticated = true
}
}
})路由守卫
添加路由守卫保护需要认证的页面：
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})后端接口示例
简单的 Node.js Express 后端接口参考：
// 注册接口
app.post('/api/register', (req, res) => {
// 验证并保存用户数据
res.json({ success: true })
})
// 登录接口
app.post('/api/login', (req, res) => {
// 验证用户凭据
const token = generateToken(user)
res.json({ success: true, token })
})表单验证
可以使用 VeeValidate 进行表单验证：
import { useField, useForm } from 'vee-validate'
const { handleSubmit } = useForm()
const { value: email, errorMessage: emailError } = useField('email', validateEmail)
const { value: password, errorMessage: passwordError } = useField('password', validatePassword)
const onSubmit = handleSubmit(values => {
// 提交逻辑
})响应式设计
添加基础样式增强用户体验：
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
input {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 8px;
}安全性考虑
确保实现以下安全措施：
- 使用 HTTPS 传输数据
- 后端对密码进行哈希处理（如 bcrypt）
- 实现 CSRF 保护
- 设置合理的密码复杂度要求
- 实现登录尝试限制
测试要点
编写测试验证核心功能：
- 注册流程
- 登录流程
- 错误处理
- 表单验证
- 路由守卫
以上实现可根据具体项目需求进行调整和扩展，建议使用 Vue 3 的组合式 API 以获得更好的开发体验。
