vue 实现简单登录
Vue 实现简单登录功能
1. 创建 Vue 项目 使用 Vue CLI 快速搭建项目框架：
vue create login-demo
cd login-demo
npm install axios vue-router2. 构建登录组件
在 src/components/Login.vue 中创建登录表单：
<template>
<div class="login">
<h3>用户登录</h3>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" required>
<input v-model="password" type="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
error: ''
}
},
methods: {
async handleLogin() {
try {
const response = await this.$http.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (err) {
this.error = '登录失败，请检查用户名和密码'
}
}
}
}
</script>3. 配置路由
在 src/router/index.js 中设置路由：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login.vue'
import Dashboard from '../components/Dashboard.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
})4. 添加请求拦截器
在 src/main.js 中配置 axios：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
axios.defaults.baseURL = 'http://your-api-domain.com'
Vue.prototype.$http = axios
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!localStorage.getItem('token')) {
next('/login')
} else {
next()
}
} else {
next()
}
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')5. 创建受保护页面
在 src/components/Dashboard.vue 中：
<template>
<div>
<h3>欢迎来到仪表盘</h3>
<button @click="handleLogout">退出登录</button>
</div>
</template>
<script>
export default {
methods: {
handleLogout() {
localStorage.removeItem('token')
this.$router.push('/login')
}
}
}
</script>6. 样式优化
在 src/App.vue 中添加基础样式：
<style>
.login {
max-width: 300px;
margin: 0 auto;
padding: 20px;
}
input {
display: block;
width: 100%;
margin: 10px 0;
padding: 8px;
}
.error {
color: red;
}
</style>7. 后端接口示例 Node.js 简单登录验证示例：
app.post('/api/login', (req, res) => {
const { username, password } = req.body
if (username === 'admin' && password === '123456') {
res.json({ token: 'fake-jwt-token' })
} else {
res.status(401).send('认证失败')
}
})8. 表单验证增强 使用 Vuelidate 进行客户端验证：
npm install vuelidate在组件中添加：
import { required, minLength } from 'vuelidate/lib/validators'
export default {
validations: {
username: { required },
password: { required, minLength: minLength(6) }
},
methods: {
handleLogin() {
this.$v.$touch()
if (this.$v.$invalid) return
// 继续登录逻辑
}
}
}以上实现包含前端界面、路由保护、Token 存储和基础验证功能，可根据实际需求扩展更多特性如记住密码、验证码等功能。
