vue3 登录返回session

在 Vue3 中登录成功后获取 Session 的方式可以通过以下步骤实现：

1. 在登录页面向后端发送登录请求，将用户名和密码作为请求参数传递给后端。

2. 后端验证用户名和密码，如果验证通过，则生成一个 Session ID，并将 Session ID 保存在 Redis、MySQL 或者其他数据存储中，并将 Session ID 返回给前端。

3. 前端在接收到后端返回的 Session ID 后，可以将其存储在本地的 Local Storage 或者 Session Storage 中。

4. 在之后的请求中，前端需要在请求头中携带 Session ID，后端根据 Session ID 来识别用户的身份信息。

下面是一个简单的示例代码：

<template>
  <div>
    <input v-model="username">
    <input v-model="password">
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 向后端发送登录请求
      this.$axios.post('/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        // 登录成功，将 Session ID 存储到本地
        localStorage.setItem('sessionId', response.data.sessionId)
      }).catch(error => {
        // 登录失败，处理错误信息
      })
    }
  }
}
</script>

在之后的请求中，可以在请求头中加入 Session ID，例如：

import axios from 'axios'

// 设置请求拦截器，在请求头中加入 Session ID
axios.interceptors.request.use(config => {
  const sessionId = localStorage.getItem('sessionId')
  if (sessionId) {
    config.headers['sessionId'] = sessionId
  }
  return config
})

在后端中，需要根据请求头中的 Session ID 来识别用户的身份信息，例如：

@RestController
public class UserController {
  
  @Autowired
  private UserService userService;
  
  @GetMapping("/user")
  public User getUser(@RequestHeader("sessionId") String sessionId) {
    // 根据 Session ID 获取用户信息
    User user = userService.getUserBySessionId(sessionId);
    return user;
  }
  
}

需要注意的是，为了保证 Session 的安全性，需要在后端进行 Session 的有效期、Session ID 的生成和加密等方面进行处理。同时，需要注意防止 CSRF、XSS 等安全问题的发生。