有没有办法在 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>
在你的index.html中:
<input type="hidden" id="th-username" th:value="${#authentication.name}"/>
在您的 App.js 中:
import $ from 'jquery';
function App(){
var username = $("#th-username").val();
return (<div>{username}</div> )
}