vue登陆实现
登录功能实现步骤
在Vue中实现登录功能通常需要结合前端表单处理、后端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>
export default {
data() {
return {
form: {
username: '',
password: ''
}
}
}
}
</script>表单验证处理
添加基本的客户端验证逻辑：
methods: {
validateForm() {
if (!this.form.username.trim()) {
alert('请输入用户名');
return false;
}
if (!this.form.password) {
alert('请输入密码');
return false;
}
return true;
}
}API请求封装
使用axios发送登录请求到后端API：
import axios from 'axios';
methods: {
async handleSubmit() {
if (!this.validateForm()) return;
try {
const response = await axios.post('/api/login', this.form);
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
alert('登录失败: ' + (error.response?.data?.message || error.message));
}
}
}状态管理集成
使用Vuex管理登录状态：
// store/modules/auth.js
export default {
state: {
user: null,
token: localStorage.getItem('token') || null
},
mutations: {
setUser(state, user) {
state.user = user;
},
setToken(state, token) {
state.token = token;
localStorage.setItem('token', token);
},
logout(state) {
state.user = null;
state.token = null;
localStorage.removeItem('token');
}
},
actions: {
async login({ commit }, credentials) {
const response = await axios.post('/api/login', credentials);
commit('setUser', response.data.user);
commit('setToken', response.data.token);
}
}
}路由守卫配置
添加路由守卫保护需要认证的页面：
// router/index.js
router.beforeEach((to, from, next) => {
const isAuthenticated = store.state.auth.token;
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});响应拦截处理
在axios拦截器中处理401未授权响应：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('auth/logout');
router.push('/login');
}
return Promise.reject(error);
}
);登录状态持久化
在应用初始化时恢复登录状态：
// main.js
if (localStorage.getItem('token')) {
store.dispatch('auth/fetchUser');
}以上实现涵盖了Vue登录功能的主要方面，可根据具体项目需求进行调整和扩展。
