vue前端实现登录注册
Vue 前端登录注册实现方案
环境准备
安装 Vue 3 及相关依赖（如 Vue Router、Axios）：
npm install vue@next vue-router axios登录功能实现
路由配置
在 router/index.js 中定义登录路由：
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
}
]登录表单组件
创建 Login.vue 文件，包含表单数据绑定与提交逻辑：
<template>
<form @submit.prevent="handleLogin">
<input v-model="form.username" placeholder="用户名" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const form = ref({ username: '', password: '' });
const router = useRouter();
const handleLogin = async () => {
try {
const res = await axios.post('/api/login', form.value);
localStorage.setItem('token', res.data.token);
router.push('/dashboard');
} catch (error) {
alert('登录失败');
}
};
</script>注册功能实现
路由配置
在 router/index.js 中新增注册路由：
{
path: '/register',
name: 'Register',
component: () => import('../views/Register.vue')
}注册表单组件
创建 Register.vue 文件，实现用户注册逻辑：
<template>
<form @submit.prevent="handleRegister">
<input v-model="form.username" placeholder="用户名" />
<input v-model="form.email" type="email" placeholder="邮箱" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">注册</button>
</form>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const form = ref({ username: '', email: '', password: '' });
const router = useRouter();
const handleRegister = async () => {
try {
await axios.post('/api/register', form.value);
router.push('/login');
} catch (error) {
alert('注册失败');
}
};
</script>状态管理与权限控制
Token 验证
在路由守卫中检查登录状态（router/index.js）：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' });
else next();
});全局请求拦截
在 main.js 中配置 Axios 拦截器：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
});表单验证增强
使用 Vuelidate
安装验证库并扩展登录表单：
npm install @vuelidate/core @vuelidate/validators示例验证规则
在 Login.vue 中增加验证逻辑：
import { required, minLength } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
const rules = {
username: { required },
password: { required, minLength: minLength(6) }
};
const v$ = useVuelidate(rules, form);
const handleLogin = async () => {
const isValid = await v$.value.$validate();
if (!isValid) return;
// 后续提交逻辑...
};响应式样式优化
添加基础样式
在组件中通过 <style> 标签增强表单 UI：
<style scoped>
form {
max-width: 300px;
margin: 0 auto;
}
input {
display: block;
margin: 10px 0;
width: 100%;
}
</style>
