如何在Vue前端实现自定义登录页并对接Spring Security后端认证？

1. 调整Spring Security配置 #

首先修改Spring Security配置，关闭默认的Thymeleaf登录页，指定登录请求的处理接口，并开放Vue登录页及OAuth2相关端点的访问权限。

示例配置代码：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            // 前后端分离场景下关闭CSRF，或配置CSRF令牌传递逻辑
            .csrf(csrf -> csrf.disable())
            .authorizeHttpRequests(auth -> auth
                // 允许访问Vue登录页、OAuth2授权及回调端点
                .requestMatchers("/", "/api/auth/**", "/oauth2/authorization/**", "/login/oauth2/code/**").permitAll()
                // 其余接口需认证后访问
                .anyRequest().authenticated()
            )
            // 配置表单登录逻辑
            .formLogin(form -> form
                .loginProcessingUrl("/api/auth/login") // 后端处理表单登录的接口
                .usernameParameter("username")
                .passwordParameter("password")
                // 登录成功后的自定义处理（如返回JWT或重定向到Vue首页）
                .successHandler((req, res, auth) -> {
                    res.setStatus(HttpStatus.OK.value());
                    res.getWriter().write("{\"success\":true,\"msg\":\"登录成功\"}");
                })
                // 登录失败处理
                .failureHandler((req, res, ex) -> {
                    res.setStatus(HttpStatus.UNAUTHORIZED.value());
                    res.getWriter().write("{\"success\":false,\"msg\":\"" + ex.getMessage() + "\"}");
                })
            )
            // 配置OAuth2第三方登录逻辑
            .oauth2Login(oauth2 -> oauth2
                .authorizationEndpoint(endpoint -> endpoint.baseUri("/api/auth/oauth2/authorize"))
                .redirectionEndpoint(endpoint -> endpoint.baseUri("/api/auth/login/oauth2/code/**"))
                // OAuth2登录成功后重定向到Vue首页
                .successHandler((req, res, auth) -> {
                    res.sendRedirect("http://your-vue-domain/home");
                })
            );
        return http.build();
    }
}

2. 开发Vue登录组件 #

在Vue项目中创建登录组件，包含表单登录和OAuth2第三方登录两个模块，直接复用现有Vue组件逻辑即可。

示例Vue组件代码：

<template>
  <div class="login-container">
    <h3>系统登录</h3>
    <!-- 表单登录区域 -->
    <form @submit.prevent="submitLogin">
      <input v-model="form.username" type="text" placeholder="请输入用户名" />
      <input v-model="form.password" type="password" placeholder="请输入密码" />
      <button type="submit" class="login-btn">账号密码登录</button>
    </form>
    
    <!-- OAuth2第三方登录区域 -->
    <div class="oauth-section">
      <p>第三方账号登录</p>
      <button @click="redirectToGithub" class="oauth-btn">GitHub登录</button>
      <button @click="redirectToGoogle" class="oauth-btn">Google登录</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const form = ref({
  username: '',
  password: ''
});

// 表单登录请求
const submitLogin = async () => {
  try {
    const res = await axios.post('/api/auth/login', form.value);
    if (res.data.success) {
      // 登录成功，跳转到系统首页
      window.location.href = '/home';
    }
  } catch (err) {
    alert(err.response.data.msg || '登录失败');
  }
};

// 跳转到GitHub授权页面
const redirectToGithub = () => {
  window.location.href = '/api/auth/oauth2/authorization/github';
};

// 跳转到Google授权页面
const redirectToGoogle = () => {
  window.location.href = '/api/auth/oauth2/authorization/google';
};
</script>

3. 处理跨域问题（前后端分离部署时） #

如果Vue应用和Spring Boot后端部署在不同域名下，需要在Spring Boot中配置CORS规则，允许Vue域名的跨域请求：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 允许Vue应用的域名，替换为实际地址
        config.addAllowedOrigin("http://your-vue-domain");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

4. 关键注意事项 #

• 令牌管理：如果采用JWT而非Session，登录成功后后端需返回JWT令牌，Vue端将令牌存储在localStorage或Cookie中，后续请求通过Authorization: Bearer {token}请求头携带令牌，同时Spring Security需添加JWT过滤器验证令牌有效性。
• OAuth2回调处理：OAuth2授权成功后，后端可生成JWT令牌并通过重定向参数传递给Vue，或在Vue首页加载时调用后端接口获取当前用户信息。
• CSRF防护：若不关闭CSRF，需在Vue登录表单中携带Spring Security生成的CSRF令牌，可通过后端接口预先获取令牌并渲染到Vue页面中。

内容的提问来源于stack exchange，提问作者quasimodo