vue实现登录验证
Vue 实现登录验证
前端部分
安装必要的依赖（如axios、vue-router）：
npm install axios vue-router创建登录表单组件（Login.vue）：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleSubmit() {
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 (error) {
alert('登录失败')
}
}
}
}
</script>配置路由守卫（router/index.js）：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Dashboard from '@/components/Dashboard'
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后端部分（Node.js示例）
安装必要依赖：
npm install express jsonwebtoken body-parser cors创建服务器（server.js）：
const express = require('express')
const jwt = require('jsonwebtoken')
const bodyParser = require('body-parser')
const cors = require('cors')
const app = express()
app.use(bodyParser.json())
app.use(cors())
const users = [
{ id: 1, username: 'admin', password: 'admin' }
]
const SECRET_KEY = 'your-secret-key'
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({ id: user.id }, SECRET_KEY, { expiresIn: '1h' })
res.json({ token })
} else {
res.status(401).json({ error: '认证失败' })
}
})
app.listen(3000, () => console.log('服务器运行在3000端口'))安全增强
添加axios请求拦截器（main.js）：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})实现token刷新机制：
// 在响应拦截器中检查token过期
axios.interceptors.response.use(response => response, error => {
if (error.response.status === 401) {
// 处理token过期逻辑
}
return Promise.reject(error)
})验证码集成
安装vue-recaptcha：
npm install vue-recaptcha在登录组件中添加验证码：
<template>
<vue-recaptcha sitekey="your-site-key" @verify="onVerify"></vue-recaptcha>
</template>
<script>
import VueRecaptcha from 'vue-recaptcha'
export default {
components: { VueRecaptcha },
methods: {
onVerify(response) {
this.recaptchaResponse = response
}
}
}
</script>
