springboot怎么给vue传递session,请给出代码示例
时间: 2024-03-25 14:36:45 浏览: 92
给 Vue 传递 Session,需要在后端配置跨域请求,同时在前端通过 axios 等 HTTP 库进行请求,传递 Cookie。下面是一个简单的代码示例:
1. 后端(Spring Boot)配置跨域请求和 Session:
```java
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
@Controller
public class LoginController {
@PostMapping("/login")
public String login(HttpSession session, @RequestParam("username") String username, @RequestParam("password") String password) {
// 登录验证
session.setAttribute("username", username);
return "redirect:/home";
}
@GetMapping("/home")
public String home(HttpSession session, Model model) {
// 从 Session 中获取用户名
String username = (String) session.getAttribute("username");
model.addAttribute("username", username);
return "home";
}
}
```
2. 前端(Vue)通过 axios 进行请求,传递 Cookie:
```js
import axios from 'axios'
const service = axios.create({
withCredentials: true, // 允许携带 Cookie
timeout: 5000 // 请求超时时间
})
export function login(username, password) {
const data = {
username,
password
}
return service({
url: '/login',
method: 'post',
data
})
}
export function getHome() {
return service({
url: '/home',
method: 'get'
})
}
```
在以上代码中,我们通过 `withCredentials: true` 允许携带 Cookie,同时在登录请求和首页请求中使用了同一个 axios 实例,保证了请求的连续性,从而实现了后端 Session 的传递。
阅读全文