vue登录功能的实现
Vue 登录功能实现
前端实现
创建登录表单组件 使用 Vue 的单文件组件结构，包含用户名和密码输入框、提交按钮及错误提示区域。
<template>
<div class="login-form">
<input v-model="username" placeholder="用户名" type="text">
<input v-model="password" placeholder="密码" type="password">
<button @click="handleLogin">登录</button>
<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 axios.post('/api/login', {
username: this.username,
password: this.password
})
localStorage.setItem('token', response.data.token)
this.$router.push('/dashboard')
} catch (err) {
this.error = err.response.data.message || '登录失败'
}
}
}
}
</script>路由配置 在路由文件中设置登录页和需要认证的页面，使用导航守卫进行权限控制。
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', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
const token = localStorage.getItem('token')
if (!token) {
next('/login')
} else {
next()
}
} else {
next()
}
})
export default router后端API实现
Express.js 示例 创建一个简单的登录API端点，验证用户凭据并返回JWT令牌。
const express = require('express')
const jwt = require('jsonwebtoken')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
const users = [
{ id: 1, username: 'admin', password: 'admin123' }
]
app.post('/api/login', (req, res) => {
const { username, password } = req.body
const user = users.find(u => u.username === username && u.password === password)
if (user) {
const token = jwt.sign({ userId: user.id }, 'your-secret-key', { expiresIn: '1h' })
res.json({ token })
} else {
res.status(401).json({ message: '无效的用户名或密码' })
}
})
app.listen(3000, () => console.log('服务器运行在3000端口'))安全增强措施
前端安全 使用HTTPS传输数据，敏感字段在存储时进行加密处理，设置合理的令牌过期时间。
后端安全 实现密码哈希存储（如bcrypt），添加速率限制防止暴力破解，使用HTTP安全头。
测试与调试
单元测试 编写测试用例验证登录逻辑，模拟API调用和错误场景。
端到端测试 使用Cypress或类似工具测试完整登录流程，包括成功和失败场景。
部署注意事项
配置生产环境变量，确保密钥安全，设置CORS策略限制前端访问来源，启用HTTPS加密传输。
