vue登录实现
Vue 登录实现
基础登录表单组件
创建一个简单的登录表单组件，包含用户名和密码输入框以及提交按钮。使用 Vue 的双向数据绑定 v-model 来获取用户输入。
<template>
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="Username" required />
<input v-model="password" type="password" placeholder="Password" required />
<button type="submit">Login</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 登录逻辑
}
}
}
</script>发送登录请求
在 handleLogin 方法中，使用 axios 或其他 HTTP 客户端发送登录请求到后端 API。处理成功和失败的响应。
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
// 处理成功响应
} catch (error) {
// 处理错误
}
}
}存储用户状态
登录成功后，将用户 token 或其他认证信息存储在 localStorage 或 sessionStorage 中，方便后续请求使用。也可以使用 Vuex 管理全局用户状态。
// 存储 token
localStorage.setItem('token', response.data.token)
// Vuex 示例
this.$store.commit('setUser', response.data.user)路由跳转
登录成功后，使用 Vue Router 跳转到主页或其他受保护的路由。
this.$router.push('/dashboard')路由守卫
实现全局前置守卫，检查用户是否已登录，未登录则重定向到登录页面。
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})错误处理
在登录失败时，显示错误信息给用户。
catch (error) {
this.errorMessage = error.response.data.message || 'Login failed'
}表单验证
添加简单的表单验证，确保用户名和密码不为空。
if (!this.username || !this.password) {
this.errorMessage = 'Username and password are required'
return
}加载状态
在登录请求期间显示加载状态，提升用户体验。
data() {
return {
isLoading: false
}
},
methods: {
async handleLogin() {
this.isLoading = true
try {
// 登录逻辑
} finally {
this.isLoading = false
}
}
}记住登录状态
添加 "记住我" 选项，延长 token 有效期。
<input v-model="rememberMe" type="checkbox" id="remember" />
<label for="remember">Remember me</label>if (this.rememberMe) {
localStorage.setItem('token', response.data.token)
} else {
sessionStorage.setItem('token', response.data.token)
}响应式设计
确保登录表单在不同设备上显示正常，添加基本的 CSS 样式。
form {
max-width: 300px;
margin: 0 auto;
}
input {
width: 100%;
margin-bottom: 10px;
}
button {
width: 100%;
}第三方登录
集成第三方登录如 Google 或 Facebook，使用相应的 SDK 或 OAuth 流程。
methods: {
loginWithGoogle() {
// 调用 Google 登录 SDK
}
}
