vue3 登录实现
Vue3 登录实现
创建登录表单组件
使用 Vue3 的 Composition API 创建一个登录表单组件，包含用户名和密码输入框。
<template>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" type="text" placeholder="用户名" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script setup>
import { reactive } from 'vue';
const form = reactive({
username: '',
password: ''
});
const handleSubmit = () => {
console.log('提交登录表单', form);
};
</script>添加表单验证
使用第三方库如 vee-validate 或自定义验证逻辑来确保输入的有效性。
<template>
<form @submit.prevent="handleSubmit">
<input
v-model="form.username"
type="text"
placeholder="用户名"
:class="{ 'error': errors.username }"
/>
<span v-if="errors.username">{{ errors.username }}</span>
<input
v-model="form.password"
type="password"
placeholder="密码"
:class="{ 'error': errors.password }"
/>
<span v-if="errors.password">{{ errors.password }}</span>
<button type="submit">登录</button>
</form>
</template>
<script setup>
import { reactive } from 'vue';
const form = reactive({
username: '',
password: ''
});
const errors = reactive({
username: '',
password: ''
});
const validateForm = () => {
let isValid = true;
if (!form.username) {
errors.username = '用户名不能为空';
isValid = false;
}
if (!form.password) {
errors.password = '密码不能为空';
isValid = false;
}
return isValid;
};
const handleSubmit = () => {
if (validateForm()) {
console.log('表单验证通过', form);
}
};
</script>调用登录接口
使用 axios 或 fetch 发送登录请求到后端 API。
<script setup>
import { reactive } from 'vue';
import axios from 'axios';
const form = reactive({
username: '',
password: ''
});
const handleSubmit = async () => {
try {
const response = await axios.post('/api/login', form);
console.log('登录成功', response.data);
} catch (error) {
console.error('登录失败', error.response.data);
}
};
</script>处理登录状态
使用 Vuex 或 Pinia 管理登录状态，并在登录成功后跳转到主页。
<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
const form = reactive({
username: '',
password: ''
});
const router = useRouter();
const authStore = useAuthStore();
const handleSubmit = async () => {
try {
const response = await axios.post('/api/login', form);
authStore.setUser(response.data.user);
router.push('/');
} catch (error) {
console.error('登录失败', error.response.data);
}
};
</script>添加加载状态
在登录过程中显示加载状态，避免用户重复提交。
<template>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" type="text" placeholder="用户名" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit" :disabled="isLoading">
{{ isLoading ? '登录中...' : '登录' }}
</button>
</form>
</template>
<script setup>
import { reactive, ref } from 'vue';
const form = reactive({
username: '',
password: ''
});
const isLoading = ref(false);
const handleSubmit = async () => {
isLoading.value = true;
try {
const response = await axios.post('/api/login', form);
console.log('登录成功', response.data);
} catch (error) {
console.error('登录失败', error.response.data);
} finally {
isLoading.value = false;
}
};
</script>持久化登录状态
使用 localStorage 或 sessionStorage 持久化登录状态，避免页面刷新后丢失。
<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
const form = reactive({
username: '',
password: ''
});
const router = useRouter();
const authStore = useAuthStore();
const handleSubmit = async () => {
try {
const response = await axios.post('/api/login', form);
authStore.setUser(response.data.user);
localStorage.setItem('token', response.data.token);
router.push('/');
} catch (error) {
console.error('登录失败', error.response.data);
}
};
</script>路由守卫
在路由守卫中检查登录状态，未登录用户跳转到登录页。
import { createRouter, createWebHistory } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
const routes = [
{ path: '/', component: Home, meta: { requiresAuth: true } },
{ path: '/login', component: Login }
];
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from, next) => {
const authStore = useAuthStore();
if (to.meta.requiresAuth && !authStore.isAuthenticated) {
next('/login');
} else {
next();
}
});错误提示
在登录失败时显示错误提示，增强用户体验。
<template>
<form @submit.prevent="handleSubmit">
<input v-model="form.username" type="text" placeholder="用户名" />
<input v-model="form.password" type="password" placeholder="密码" />
<button type="submit">登录</button>
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
</form>
</template>
<script setup>
import { reactive, ref } from 'vue';
const form = reactive({
username: '',
password: ''
});
const errorMessage = ref('');
const handleSubmit = async () => {
try {
const response = await axios.post('/api/login', form);
console.log('登录成功', response.data);
} catch (error) {
errorMessage.value = error.response.data.message || '登录失败';
}
};
</script>
