vue session实现登录页面
Vue 中实现 Session 登录页面
在 Vue 中实现基于 Session 的登录功能，通常需要结合后端服务（如 Node.js、PHP 等）来管理 Session。以下是实现的基本步骤：
安装必要依赖
确保项目中已安装 axios 用于发送 HTTP 请求：
npm install axios创建登录页面组件
在 Vue 组件中，构建登录表单并处理用户输入：
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
<p v-if="error">{{ error }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
error: ''
};
},
methods: {
async handleLogin() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
if (response.data.success) {
this.$router.push('/dashboard'); // 登录成功后跳转
} else {
this.error = response.data.message;
}
} catch (err) {
this.error = '登录失败，请重试';
}
}
}
};
</script>后端 Session 配置示例（Node.js）
后端需要处理登录请求并设置 Session。以下是 Express 的示例：
const express = require('express');
const session = require('express-session');
const app = express();
app.use(session({
secret: 'your-secret-key',
resave: false,
saveUninitialized: true,
cookie: { secure: false } // 根据 HTTPS 配置调整
}));
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
if (username === 'admin' && password === '123456') {
req.session.user = { username };
res.json({ success: true });
} else {
res.status(401).json({ success: false, message: '用户名或密码错误' });
}
});检查登录状态
在 Vue 中可以通过全局路由守卫检查 Session 状态：
router.beforeEach((to, from, next) => {
axios.get('/api/check-auth')
.then(response => {
if (response.data.isAuthenticated || to.path === '/login') {
next();
} else {
next('/login');
}
})
.catch(() => next('/login'));
});后端验证 Session 接口
app.get('/api/check-auth', (req, res) => {
res.json({ isAuthenticated: !!req.session.user });
});注销功能
实现注销接口并清除 Session：
app.post('/api/logout', (req, res) => {
req.session.destroy();
res.json({ success: true });
});注意事项
- 确保后端配置了正确的 CORS 和 Cookie 设置，以便前端能发送凭据。
- 生产环境中应使用 HTTPS 并启用
secure: true的 Cookie 选项。 - 避免在前端存储敏感信息，Session 数据应始终由后端管理。
