在React中使用Thymeleaf变量

问题描述 投票:0回答:1

有没有办法在 React 中使用 Thymeleaf 变量?

我在here读到这应该是一个坏主意。问题是,我使用 Thymeleaf 创建了一个 Spring Boot 应用程序,其中包含登录机制。我从安全部分(第 5 部分 - 保护 UI 和 API)获取了 Spring Boot Thymeleaf 示例here

我使用 Basic 通过用户名/密码进行身份验证。在

<body>
元素的顶部,“您好,用户名”
<div>
显示登录的用户和注销按钮。

我需要的是用户名值,即“greg”。它位于 Thymeleaf 变量

${#authentication.name}
中。我想获取该值并在
built/bundle.js
中捆绑的 React 应用程序中使用它。

有什么方法可以让变量进入React,即设置一个全局可访问的变量吗?

这是

index.html
:

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/main.css" />
</head>
<body>
    <div>
        Hello, <span id="managername" th:text="${#authentication.name}">user</span>.
        <form th:action="@{/logout}" method="post">
            <input type="submit" value="Log Out"/>
        </form>
    </div>
    <div th:with="message=${#authentication.name}"></div>

    <div id="app"></div>

    <script src="built/bundle.js"></script>
</body>
</html>
reactjs spring spring-boot thymeleaf
1个回答
0
投票
  1. 在你的index.html中:

    <input type="hidden" id="th-username" th:value="${#authentication.name}"/>
    
  2. 在您的 App.js 中:

    import $ from 'jquery';
    
    function App(){
      var username = $("#th-username").val();
    
    return (<div>{username}</div> )
    
    }
    
© www.soinside.com 2019 - 2024. All rights reserved.