【Spring Security + OAuth2】前后端分离

在前后端分离的Spring Security + OAuth2中，后端负责认证和授权，前端负责页面的展示和用户交互。以下是一个简化的后端配置示例：

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableResourceServer;
 
@Configuration
@EnableResourceServer
public class OAuth2ResourceServerConfig extends WebSecurityConfigurerAdapter {
 
    @Override
    public void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .antMatchers("/api/public/**").permitAll() // 公开接口
            .anyRequest().authenticated() // 其他所有请求需要身份认证
            .and()
            .csrf().disable(); // 禁用CSRF保护，因为这是一个REST API
    }
}

前端在用户登录时，通过发送HTTP请求到/oauth/token端点来获取访问令牌，并在后续的API调用中使用这个令牌。

// 用户登录，获取访问令牌的示例代码
fetch('/oauth/token', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': 'Basic ' + btoa('client-id:client-secret')
    },
    body: 'grant_type=password&username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)
}).then(response => response.json())
  .then(data => {
    // 使用返回的access_token访问受保护的资源
    fetch('/api/protected', {
        headers: {
            'Authorization': 'Bearer ' + data.access_token
        }
    }).then(response => response.json())
      .then(protectedData => {
          // 处理受保护资源的数据
      });
  });

在前端，你需要在每次API调用时附加访问令牌。后端则需要配置Spring Security和OAuth2以确保API端点的安全性。这样前后端通过标准的OAuth2协议进行认证和授权，实现了前后端分离的权限管理。