vue实现login
Vue 实现登录功能
环境准备 确保已安装 Vue CLI 或配置好 Vue 项目环境，需配合后端 API 接口（如 axios 请求）。
核心代码结构
// src/views/Login.vue
<template>
<div class="login-container">
<form @submit.prevent="handleSubmit">
<input v-model="form.username" placeholder="用户名"/>
<input v-model="form.password" type="password" placeholder="密码"/>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
form: {
username: '',
password: ''
}
};
},
methods: {
async handleSubmit() {
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);
}
}
}
};
</script>关键实现步骤
表单数据绑定
使用 v-model 双向绑定输入框数据到 form 对象，表单提交时通过 @submit.prevent 阻止默认行为。
异步请求处理
通过 axios 发送 POST 请求到后端接口 /api/login，提交用户名和密码。示例中假设后端返回包含 token 的响应。
登录状态存储
成功登录后，将返回的 token 存入 localStorage，用于后续认证。通过 Vue Router 跳转到受保护的路由（如 /dashboard）。
错误处理 捕获请求异常并显示错误提示，实际项目中可替换为 Toast 或 Message 组件增强用户体验。
路由配置示例
// src/router/index.js
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
}安全增强建议
- 添加表单验证（如 VeeValidate）
- 使用 HTTPS 传输
- 后端应实现 JWT 过期机制
- 敏感操作需二次验证
样式优化方向
- 添加加载状态（禁用按钮+loading图标）
- 输入框焦点样式
- 响应式布局适配
可根据实际项目需求扩展 OAuth 第三方登录或验证码功能。
