vue实现简单登录
Vue 实现简单登录功能
创建登录表单组件
在 Vue 项目中创建一个 Login.vue 组件，包含用户名和密码输入框以及登录按钮。使用 v-model 实现双向数据绑定。
<template>
<div class="login-form">
<h3>用户登录</h3>
<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button @click="handleLogin">登录</button>
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
error: ''
}
}
}
</script>实现登录逻辑
在 handleLogin 方法中添加验证逻辑，可以模拟 API 调用或直接验证预设的用户名密码。
<script>
export default {
methods: {
handleLogin() {
if (!this.username || !this.password) {
this.error = '用户名和密码不能为空'
return
}
// 模拟API验证
if (this.username === 'admin' && this.password === '123456') {
localStorage.setItem('isAuthenticated', 'true')
this.$router.push('/dashboard')
} else {
this.error = '用户名或密码错误'
}
}
}
}
</script>添加路由配置
在路由文件中配置登录页面的路由，并设置路由守卫进行访问控制。
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('isAuthenticated')
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login')
} else {
next()
}
})
export default router添加样式
为登录表单添加基本样式，使其更美观。
<style scoped>
.login-form {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.error {
color: red;
margin-top: 10px;
}
</style>实现登出功能
在需要的地方添加登出按钮，清除认证状态并重定向到登录页面。
<template>
<div>
<h1>欢迎来到仪表盘</h1>
<button @click="handleLogout">登出</button>
</div>
</template>
<script>
export default {
methods: {
handleLogout() {
localStorage.removeItem('isAuthenticated')
this.$router.push('/login')
}
}
}
</script>这个实现包含了基本的登录功能，包括表单验证、路由守卫和状态管理。可以根据实际需求扩展更多功能，如记住密码、密码重置等。
