vue node实现登录验证
Vue 和 Node.js 实现登录验证
前端部分 (Vue.js)
安装必要的依赖：
npm install axios vue-router vuex创建登录表单组件 (Login.vue)：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="Username" />
<input v-model="password" type="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleSubmit() {
try {
const response = await axios.post('http://localhost:3000/login', {
username: this.username,
password: this.password
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
console.error('Login failed:', error);
}
}
}
}
</script>配置路由和全局状态管理 (main.js)：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import App from './App.vue';
Vue.use(VueRouter);
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: localStorage.getItem('token') || null
},
mutations: {
setToken(state, token) {
state.token = token;
localStorage.setItem('token', token);
},
clearToken(state) {
state.token = null;
localStorage.removeItem('token');
}
}
});
const router = new VueRouter({
routes: [
{ path: '/login', component: () => import('./Login.vue') },
{
path: '/dashboard',
component: () => import('./Dashboard.vue'),
meta: { requiresAuth: true }
}
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.state.token) {
next('/login');
} else {
next();
}
} else {
next();
}
});
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');后端部分 (Node.js)
安装必要的依赖：
npm install express jsonwebtoken bcryptjs cors body-parser创建服务器 (server.js)：
const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
app.use(cors());
app.use(bodyParser.json());
const SECRET_KEY = 'your-secret-key';
const users = [
{
id: 1,
username: 'admin',
password: bcrypt.hashSync('admin123', 8)
}
];
app.post('/login', (req, res) => {
const { username, password } = req.body;
const user = users.find(u => u.username === username);
if (!user) return res.status(404).send('User not found');
const passwordIsValid = bcrypt.compareSync(password, user.password);
if (!passwordIsValid) return res.status(401).send('Invalid password');
const token = jwt.sign({ id: user.id }, SECRET_KEY, {
expiresIn: 86400 // 24 hours
});
res.status(200).send({ token });
});
app.get('/protected', (req, res) => {
const token = req.headers['x-access-token'];
if (!token) return res.status(403).send('No token provided');
jwt.verify(token, SECRET_KEY, (err, decoded) => {
if (err) return res.status(500).send('Failed to authenticate token');
res.status(200).send('Access granted to protected content');
});
});
app.listen(3000, () => console.log('Server running on port 3000'));安全注意事项
使用 HTTPS 保护传输中的数据 设置适当的 CORS 策略 实现 CSRF 保护 定期轮换 JWT 密钥 设置合理的令牌过期时间 实现速率限制防止暴力破解 对密码进行加盐哈希处理 (bcrypt)
测试流程
启动 Node.js 服务器：node server.js
运行 Vue 应用：npm run serve
访问登录页面并输入凭据
验证成功登录后重定向到受保护页面
检查本地存储中的令牌
尝试访问受保护路由验证守卫是否有效
