Spring Boot和Vue.js怎么实现退出功能

Spring Boot 和 Vue.js 实现退出功能的具体实现方式可能因项目具体的架构和需求而有所不同，下面是一种可能的实现方式：

1. 后端实现

在 Spring Boot 后端，可以创建一个 LogoutController 类，提供一个 /logout 的接口。在接口中，可以使用 Spring Security 的 logout() 方法来实现退出功能，示例代码如下：

@RestController
public class LogoutController {
    
    @PostMapping("/logout")
    public void logout(HttpServletRequest request, HttpServletResponse response) {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        if (authentication != null) {
            new SecurityContextLogoutHandler().logout(request, response, authentication);
        }
    }
}

2. 前端实现

在 Vue.js 前端，可以创建一个 logout() 方法，通过 axios 发送一个 POST 请求到后端的 /logout 接口来实现退出功能，示例代码如下：

methods: {
    logout() {
        axios.post('/logout')
            .then(response => {
                // 退出成功后的操作，如跳转到登录页面等
            })
            .catch(error => {
                console.log(error);
            });
    }
}

需要注意的是，在使用 axios 发送 POST 请求时，需要在请求头中添加 CSRF Token，以防止 CSRF 攻击。可以通过在 index.html 中添加以下 meta 标签来获取 CSRF Token：

<meta th:name="_csrf" th:content="${_csrf.token}" />
<meta th:name="_csrf_header" th:content="${_csrf.headerName}" />

在发送 POST 请求时，需要在请求头中添加以下内容：

axios.interceptors.request.use(config => {
    config.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="_csrf"]').content;
    config.headers['X-CSRF-HEADER'] = document.querySelector('meta[name="_csrf_header"]').content;
    return config;
});

这样，就可以在 Spring Boot 和 Vue.js 中实现退出功能了。