vue++实现登录注册
Vue 实现登录注册功能
项目初始化与依赖安装
使用 Vue CLI 创建一个新项目，安装必要依赖如 vue-router 和 axios：
vue create auth-demo
cd auth-demo
npm install vue-router axios路由配置
在 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登录组件实现
创建 src/views/Login.vue 文件：
<template>
<div>
<h2>登录</h2>
<form @submit.prevent="handleLogin">
<input v-model="email" type="email" placeholder="邮箱" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
email: this.email,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
alert('登录失败')
}
}
}
}
</script>注册组件实现
创建 src/views/Register.vue 文件：
<template>
<div>
<h2>注册</h2>
<form @submit.prevent="handleRegister">
<input v-model="name" type="text" placeholder="姓名" required>
<input v-model="email" type="email" placeholder="邮箱" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">注册</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
name: '',
email: '',
password: ''
}
},
methods: {
async handleRegister() {
try {
await axios.post('/api/register', {
name: this.name,
email: this.email,
password: this.password
})
alert('注册成功')
this.$router.push('/login')
} catch (error) {
alert('注册失败')
}
}
}
}
</script>状态管理（可选）
对于更复杂的应用，可以使用 Pinia 管理用户状态：
npm install pinia创建 src/stores/auth.js：
import { defineStore } from 'pinia'
export const useAuthStore = defineStore('auth', {
state: () => ({
user: null,
token: localStorage.getItem('token') || null
}),
actions: {
async login(credentials) {
const response = await axios.post('/api/login', credentials)
this.token = response.data.token
localStorage.setItem('token', this.token)
},
async register(userData) {
await axios.post('/api/register', userData)
}
}
})表单验证增强
使用 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)API 服务封装
创建 src/services/auth.js 封装 API 调用：
import axios from 'axios'
const API_URL = 'http://your-api-url.com'
export default {
login(credentials) {
return axios.post(`${API_URL}/login`, credentials)
},
register(userData) {
return axios.post(`${API_URL}/register`, userData)
}
}导航守卫
在路由中添加导航守卫检查认证状态：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})样式优化
使用 CSS 或 UI 框架如 Element Plus 美化表单：
npm install element-plus在 main.js 中引入：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')
