如何使用 React 前端和 Spring Boot 安全后端进行客户端身份验证检查？

Posted 2023-02-21

【中文标题】如何使用 React 前端和 Spring Boot 安全后端进行客户端身份验证检查？

【英文标题】：How do I do client side authentication check with React front end and Spring Boot security backend?

【发布时间】：2018-02-11 05:52:11

【问题描述】：

我已经设置了 Spring Boot 安全依赖项

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>

我还在我的 WebSecurityConfigAdapter 中限制了一些页面，例如

  http
        .authorizeRequests()                 
        .antMatchers("/").permitAll()
        .antMatchers("/admin/**").hasRole("ADMIN")

（我还完成了 UsersDetailsS​​ervice 等的各种其他样板设置）

在我使用 html/thymeleaf 的传统前端中，如果用户已登录，我可以简单地执行类似这样的操作来显示注销链接。

 <form sec:authorize="isAuthenticated()" id="frmlogout" th:action="@/logout" method="post" class="form-inline">
        <a href="javascript:" onclick="document.getElementById('frmlogout').submit(); return false;">Logout</a>
 </form>

问题是，如何从我的 react .js 类中进行类似的“isAuthenticated()”检查（以及角色检查）？有没有可能？

期望的结果是我可以将注销按钮添加到我的导航栏，该导航栏在我的 .js 类中定义。

【问题讨论】：

检查这个问题 - ***.com/questions/43164554/…

【参考方案1】：

React.js + Spring Security 上的这篇文章展示了一种使用会话 cookie 的方法，这是 spring mvc 中保护通信的传统方式。

或者您可以为您的 API 使用 Basic Auth 并在 React 中实现登录逻辑。如果对 API 的调用导致 HTTP 401 Unauthenticated，则要求用户提供凭据并使用 in react 来调用 API。