vue实现登录组件
Vue 登录组件实现
组件结构设计
创建 Login.vue 单文件组件，包含模板、脚本和样式三部分。模板部分需设计表单元素（用户名、密码输入框、提交按钮），脚本处理数据绑定和提交逻辑，样式定义组件外观。
<template>
<div class="login-container">
<form @submit.prevent="handleSubmit">
<input v-model="username" type="text" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
<p v-if="errorMessage" class="error">{{ errorMessage }}</p>
</div>
</template>数据绑定与验证
使用 Vue 的响应式数据管理表单输入，添加基础验证逻辑确保输入非空。可通过计算属性或方法实现更复杂的验证规则。
<script>
export default {
data() {
return {
username: '',
password: '',
errorMessage: ''
}
},
methods: {
validateInput() {
if (!this.username.trim() || !this.password.trim()) {
this.errorMessage = '用户名和密码不能为空'
return false
}
return true
}
}
}
</script>提交逻辑处理
表单提交时调用验证方法，通过后发起 API 请求。使用 axios 或 fetch 与后端交互，处理成功或失败的回调。
<script>
import axios from 'axios'
export default {
methods: {
async handleSubmit() {
if (!this.validateInput()) return
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (error) {
this.errorMessage = error.response?.data?.message || '登录失败'
}
}
}
}
</script>样式优化
添加 CSS 美化表单元素，使用过渡效果提升用户体验。建议采用 Flexbox 或 Grid 布局保持响应式设计。
<style scoped>
.login-container {
max-width: 300px;
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input {
width: 100%;
margin-bottom: 10px;
padding: 8px;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
}
.error {
color: red;
font-size: 14px;
}
</style>路由集成
在 Vue Router 中配置登录路由，登录成功后跳转到受保护的路由。可通过导航守卫实现权限控制。
// router.js
{
path: '/login',
component: () => import('./views/Login.vue')
}状态管理（可选）
对于复杂应用，建议使用 Vuex 或 Pinia 管理登录状态。存储用户 token 和基本信息，便于全局访问。
// store.js
actions: {
async login({ commit }, credentials) {
const response = await api.login(credentials)
commit('SET_USER', response.data.user)
}
}安全性增强
添加防 XSS 和 CSRF 措施，密码字段应加密传输。可集成第三方认证服务如 OAuth2.0。
// 示例：axios 全局配置
axios.defaults.withCredentials = true
