vue实现自定义登录
Vue 实现自定义登录功能
创建登录组件
在 Vue 项目中创建一个独立的登录组件，例如 Login.vue。该组件包含表单元素，如用户名和密码输入框，以及提交按钮。
<template>
<div class="login-container">
<form @submit.prevent="handleLogin">
<input v-model="username" type="text" placeholder="用户名" required />
<input v-model="password" type="password" placeholder="密码" required />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 登录逻辑
}
}
}
</script>实现登录逻辑
在 handleLogin 方法中，调用后端 API 进行身份验证。可以使用 axios 或其他 HTTP 客户端库发送请求。
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
})
// 处理登录成功
} catch (error) {
// 处理登录失败
}
}
}处理登录状态
登录成功后，通常需要保存用户令牌（如 JWT）并更新应用状态。可以使用 Vuex 或 Pinia 管理全局状态。
// 使用 Vuex 示例
const store = new Vuex.Store({
state: {
user: null,
isAuthenticated: false
},
mutations: {
setUser(state, user) {
state.user = user
state.isAuthenticated = true
}
}
})
// 在登录成功后调用
store.commit('setUser', response.data.user)路由配置
配置路由守卫，限制未登录用户访问受保护的路由。在 router.js 中设置全局前置守卫。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.state.isAuthenticated) {
next('/login')
} else {
next()
}
})样式优化
为登录页面添加适当的样式，提升用户体验。可以使用 CSS 或预处理器如 SCSS。
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
input {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 8px;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
}错误处理
在登录失败时显示错误信息，增强用户反馈。
<template>
<div v-if="error" class="error-message">
{{ error }}
</div>
</template>
<script>
export default {
data() {
return {
error: ''
}
},
methods: {
async handleLogin() {
try {
// 登录逻辑
} catch (error) {
this.error = '用户名或密码错误'
}
}
}
}
</script>持久化登录状态
使用 localStorage 或 sessionStorage 持久化登录状态，避免页面刷新后需要重新登录。
// 登录成功后保存令牌
localStorage.setItem('token', response.data.token)
// 应用初始化时检查登录状态
const token = localStorage.getItem('token')
if (token) {
store.commit('setUser', { token })
}
