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

Question

I've got the spring boot security dependency set up

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

I've also restricted some pages in my WebSecurityConfigAdapter eg

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

(I've also done the various other boilerplate setup of UsersDetailsService etc.)

In a traditional front end where I'm using html/thymeleaf I can simply do something like this to display a logout link, if the user is logged in.

 <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>

Question is, how can I do a similar "isAuthenticated()" check (as well as a role check) from my react .js classes? Is it even possible?

The desired outcome is so that I can then add the logout button to my navbar, which is defined in my .js classes.

Answer 1

This post on React.js + Spring Security shows an approach of using a session cookie which is the traditional way of securing communication in spring mvc.

Or you could use Basic Auth for your API and implement the login logic in React. If a call to the API results in a HTTP 401 Unauthenticated then ask the user to provide credentials and use the in react to call the API.