Интеграция Spring Flux и ReactJs не работает

Я разрабатываю приложение микросервиса. Микросервисы развернуты в облаке Azure. Я использую Eureka в качестве реестра сервисов и Spring Cloud Gateway в качестве шлюза API. Теперь и мой код реакции, и код Spring Boot упакованы в одну банку.

Теперь я использую Thymeleaf для перенаправления, чтобы реагировать на файл index.html для экрана входа в систему.

  thymeleaf:
   cache: false
   enabled: true
   prefix: classpath:/static/
   suffix: .html

Конфигурация безопасности WebFlux выглядит следующим образом:

@Bean
public SecurityWebFilterChain springSecurityFilterChain(ServerHttpSecurity http, MyJwtAuthConverter myJwtAuthConverter) {
    MyAuthManager myJwtAuthManager = new MyJwtAuthManager(authService, myJwtTokenUtility);
    myJwtAuthManager.setPasswordEncoder(bCryptPasswordEncoder());
    AuthenticationWebFilter authenticationWebFilter = new AuthenticationWebFilter(myJwtAuthManager);
    authenticationWebFilter.setServerAuthenticationConverter(myJwtAuthConverter);
    return http.csrf().disable()
            .authorizeExchange()
            .pathMatchers("/myContext/myloginUrl",
                    "/myContext/static/**").permitAll()
            .anyExchange().authenticated()
            .and()
            .formLogin().loginPage("myloginUrl").authenticationSuccessHandler(new RedirectServerAuthenticationSuccessHandler("/loginSuccess"))
            .authenticationFailureHandler((exchange, exception) -> Mono.error(exception))
            .and().securityContextRepository(NoOpServerSecurityContextRepository.getInstance())
            .addFilterAt(authenticationWebFilter, SecurityWebFiltersOrder.AUTHENTICATION).
            logout(logout-> logout.logoutSuccessHandler(logoutSuccessHandler("/mylogout")))
            .build();
}

Объявление файла моего контроллера, как показано ниже

@GetMapping("/myloginUrl")
public ModelAndView loginPage(){
    return new ModelAndView("index");
}

Теперь изменение URL-адреса происходит нормально, всякий раз, когда я нажимаю любой защищенный URL-адрес, он перенаправляется на URL-адрес страницы входа, как показано ниже.

http://localhost:8765/myContext/user-login

Но фактическая страница входа, разработанная в реакции, не отображается. Конфигурация маршрутизатора React, как показано ниже.

   <BrowserRouter basename = "/myContext">
        <Routes>
            <Route path = "/" element = {<Login />} />
            <Route path = "/myloginUrl" element = {<Login />} />
            <Route path = "/user" element = {<User/>} />
        </Routes>
    </BrowserRouter>

В моем build.gradle я настроил следующую вещь

processResources {
dependsOn buildFrontend
from("${projectDir}/frontend/build/") {
    into 'static'
}

}

Ошибка, которую я получаю, выглядит следующим образом:

{"view":null,"model":{},"status":null,"empty":false,"viewName":"index","modelMap":{},"reference":true}

Может ли кто-нибудь помочь, почему тимелеаф не может перенаправить на реакцию index.html ???

Это не ошибка, это просто представление вашего ModelAndView. Дикое предположение, что вы используете @RestController вместо @Controller.

M. Deinum 18.04.2023 20:44

Изменение RestController на Controller также не решило проблему. Можете ли вы предложить, какое решение можно было бы перейти на файл React index.html? как код реакции, так и код Java находятся в одной банке

Sumit Ghosh 19.04.2023 11:50

Я подозреваю, что это решило проблему, и теперь у вас есть другая проблема.

M. Deinum 19.04.2023 11:52

Изменение Rest Controller на Controller дало ошибку java.lang.IllegalStateException: не удалось разрешить представление с именем 'index'

Sumit Ghosh 19.04.2023 11:55

Что, как уже говорилось, является другой проблемой, чем у вас было раньше. Находится ли index.html в том месте, где он должен быть.

M. Deinum 19.04.2023 11:57

да, он находится внутри статической папки, как я уже упоминал, весь код реакции после того, как сборка копируется в статическую папку, и конфигурация тимелеафа, которую вы можете проверить в моем посте, указывает на статическую папку. Я сомневаюсь, что модель и представление работают с webflux?

Sumit Ghosh 19.04.2023 12:00

Это работает, но действительно ли это работает. Как ты это делаешь? Если вы запускаете это из своей IDE, сборка не выполняется и ничего не копируется. Но, как уже говорилось, ваша первоначальная проблема была решена, поскольку теперь вы сталкиваетесь с другой проблемой.

M. Deinum 19.04.2023 12:02

gradlew build -x test -Pargs=dev java -jar -Dspring.profiles.active=dev build\libs\myJar.jar

Sumit Ghosh 19.04.2023 12:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
8
77
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для Spring WebFlux нам нужно настроить следующую функцию маршрутизатора

@Bean
public RouterFunction<ServerResponse> customRouter(@Value("classpath:/static/index.html") Resource html) {
    return RouterFunctions.route(
            GET("/*"),
            request -> ServerResponse.ok().contentType(MediaType.TEXT_HTML).bodyValue(html)
    );
}

Другие вопросы по теме