vue如何实现登录注册
Vue 登录注册实现步骤
前端部分（Vue）
创建登录/注册表单组件
使用 Vue 的单文件组件（SFC）创建表单，包含用户名、密码等输入字段。表单需绑定 v-model 实现双向数据绑定。
<template>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" placeholder="用户名"/>
<input v-model="form.password" type="password" placeholder="密码"/>
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
handleSubmit() {
this.$emit('submit', this.form);
}
}
}
</script>状态管理 使用 Vuex 或 Pinia 管理用户登录状态，存储 token 和用户信息。
// Pinia 示例
import { defineStore } from 'pinia';
export const useAuthStore = defineStore('auth', {
state: () => ({
token: null,
user: null
}),
actions: {
login(data) {
this.token = data.token;
this.user = data.user;
}
}
});路由配置 通过 Vue Router 配置登录拦截和权限控制，未登录用户跳转到登录页。
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
});
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
if (to.meta.requiresAuth && !authStore.token) {
next('/login');
} else {
next();
}
});后端交互
API 请求封装 使用 Axios 封装 HTTP 请求，设置 baseURL 和拦截器。
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.example.com'
});
api.interceptors.request.use(config => {
const authStore = useAuthStore();
if (authStore.token) {
config.headers.Authorization = `Bearer ${authStore.token}`;
}
return config;
});登录注册接口调用 在组件中调用后端接口，处理响应数据。
methods: {
async handleSubmit() {
try {
const response = await api.post('/login', this.form);
const authStore = useAuthStore();
authStore.login(response.data);
this.$router.push('/dashboard');
} catch (error) {
alert('登录失败');
}
}
}安全与优化
表单验证 使用 Vuelidate 或原生验证确保输入合法性。
import { required, minLength } from 'vuelidate/lib/validators';
export default {
validations: {
form: {
username: { required },
password: { required, minLength: minLength(6) }
}
}
}Token 持久化
通过 localStorage 或 cookie 持久化 token，避免页面刷新后丢失登录状态。
// Pinia action 示例
login(data) {
this.token = data.token;
localStorage.setItem('token', data.token);
}路由懒加载 优化性能，使用动态导入拆分代码块。
const Dashboard = () => import('./views/Dashboard.vue');
