当前位置：首页 > VUE

vue session实现登录

2026-01-19 04:50:52VUE

Vue 中实现 Session 登录

在 Vue 中实现基于 Session 的登录功能，通常需要结合后端服务（如 Node.js、Spring Boot 等）来处理 Session 的创建和管理。以下是具体实现方法：

前端部分（Vue）

登录表单提交 使用 axios 或其他 HTTP 客户端发送登录请求到后端，传递用户名和密码：

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      });
      if (response.data.success) {
        // 登录成功，跳转到首页或其他页面
        this.$router.push('/home');
      }
    } catch (error) {
      console.error('登录失败', error);
    }
  }
}

检查登录状态 在 Vue 的全局守卫或页面加载时检查 Session 状态：

router.beforeEach((to, from, next) => {
  axios.get('/api/check-auth')
    .then(response => {
      if (response.data.isAuthenticated) {
        next();
      } else {
        next('/login');
      }
    })
    .catch(() => next('/login'));
});

登出功能 发送请求到后端清除 Session：

methods: {
  async handleLogout() {
    try {
      await axios.post('/api/logout');
      this.$router.push('/login');
    } catch (error) {
      console.error('登出失败', error);
    }
  }
}

后端部分（以 Node.js + Express 为例）

登录接口 验证用户凭证并创建 Session：

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 });
  }
});

检查登录状态接口 验证 Session 是否存在：

app.get('/api/check-auth', (req, res) => {
  if (req.session.user) {
    res.json({ isAuthenticated: true });
  } else {
    res.json({ isAuthenticated: false });
  }
});

登出接口 销毁 Session：

app.post('/api/logout', (req, res) => {
  req.session.destroy(err => {
    if (err) {
      return res.status(500).json({ success: false });
    }
    res.json({ success: true });
  });
});

注意事项

确保后端启用了 Session 中间件（如 express-session）。
前端需要配置 axios 的 withCredentials: true 以支持跨域携带 Cookie。
在生产环境中，使用 HTTPS 并设置 Session 的安全选项（如 secure: true）。

完整示例代码

前端 Vue 组件（Login.vue）：

<template>
  <div>
    <input v-model="username" placeholder="用户名" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', {
          username: this.username,
          password: this.password
        }, { withCredentials: true });
        if (response.data.success) {
          this.$router.push('/home');
        }
      } catch (error) {
        console.error('登录失败', error);
      }
    }
  }
};
</script>

后端 Node.js 示例：

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 } // 生产环境设为 true
}));

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 });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

通过以上方法，可以实现基于 Session 的登录功能。

vue session实现登录