我们如何使用reactJs、OAuth2.0和spring boot来管理会话？

Question

我正在构建一个 Web 和移动应用程序，前端使用 React/React Native，后端使用 Java-Spring Boot，并具有 OAuth2 授权。 从 React Web 应用程序登录 Google OAuth 效果很好。如何管理登录会话并使其在注销时失效。

任何建议/建议都会有帮助。 预先感谢。

还没有真正尝试过任何事情；我想了解如何完成此操作，以便我也可以在移动应用程序上检查是否有相同的情况。

Answer 1

参考Spring Security

• https://www.baeldung.com/spring-security-session
• https://www.baeldung.com/logout-spring-security-oauth

在这里，我试图发布可以根据您的项目要求进行改进的框架。 Spring 安全配置

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .logout(logout -> logout
                .logoutSuccessUrl("/login?logout=true")
                .invalidateHttpSession(true)
                .deleteCookies("JSESSIONID")
            )
            .oauth2Login();
    }
}

RestController 公开登录/注销端点

@RestController
@RequestMapping("/auth")
public class AuthController {

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
        // Handle login logic
        return ResponseEntity.ok(new LoginResponse("Login successful"));
    }

    @PostMapping("/logout")
    public ResponseEntity<?> logout(HttpServletRequest request, HttpServletResponse response) {
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        if (auth != null) {
            new SecurityContextLogoutHandler().logout(request, response, auth);
        }
        return ResponseEntity.ok(new LogoutResponse("Logout successful"));
    }
}

// DTO classes
public class LoginRequest {
    private String username;
    private String password;
    // Getters and setters
}

public class LoginResponse {
    private String message;
    // Constructor, getters, and setters
}

public class LogoutResponse {
    private String message;
    // Constructor, getters, and setters
}

React 注销组件

const Logout = () => {
    const handleLogout = async () => {
        try {
            const response = await axios.post('/auth/logout');
            console.log(response.data);
            // Handle logout success (e.g., redirect or clear auth state)
        } catch (error) {
            console.error('Logout failed:', error);
        }
    };

    return (
        <button onClick={handleLogout}>Logout</button>
    );
};