如何使用 JavaScript（html 脚本）将 JWT-TOKEN 传递给 localStorage？

Question

我正在为在线咖啡和茶店写一个Rest MVC 应用程序。使用了以下技术：Spring-Boot、Hibernate、PostgreSQL、Gradle、Thymeleaf、HTML、CSS。我已经准备好整个后端，还需要做一个前端。目前我正在制作授权页面。页面本身已准备好HTML 和CSS，现在您需要自己制作授权逻辑。为此，我需要在javascript 中编写一个脚本，以便我的jwt token 存储在localStorage 中。关键是我不知道如何实现这一点，如何在localStorage 中使用javascripte 通过header 传递我的token。

重要提示：javascript 必须干净，不使用框架（angular、node ...）。我该怎么做？

附：再一次，整个背面都准备好了。 Rest-authorization 方法有效（也就是说，我输入我的login 和password - 我得到一个jwt token）。

Java - 授权方法

 public ResponseEntity<Map<String, String>> authorization(@RequestBody AuthenticationRequestDTO requestDto) {
        try {
            String login = requestDto.getLogin();
            authenticationManager
                    .authenticate(new UsernamePasswordAuthenticationToken(login, requestDto.getPassword()));

            User user = userRepository.getByLogin(login);

            if (user == null) {
                throw new AuthenticationServiceException("ddwd");
            }

            String token = jwtTokenProvider.createToken(login, user.getRole());

            Map<String, String> response = new HashMap<>();
            response.put("login", login);
            response.put("token", token);

            return ResponseEntity.ok(response);

        } catch (AuthenticationServiceException e) {
            log.error("Error: ", e);
            throw new AuthenticationServiceException("Invalid login");
        }
    }

Answer 1

您可以在本地存储中添加 JWT 令牌，然后通过 API 调用检索/读取和传递值。下面是从本地存储中设置和读取值的示例。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">

function createLocalstorageItem(txtJwtTokenValue) {
  sessionStorage.setItem("jwtToken", txtJwtTokenValue);
}

function readValue() {
 var jwtToken = sessionStorage.getItem("jwtToken");
console.log("jwtToken : "+jwtToken );
return jwtToken ;

}
    
function getDataFromAPiByPassingJwtTokenInHeader(){
var jwtToken=readValue();
$.ajax({
    url: 'https://url.com',
    type: 'post',
    data: {},
    headers: {
        Bearer Token: "Bearer "+jwtToken,   //key word **Bearer**  should pass before the token string
    },
    dataType: 'json',
    success: function (data) {
        console.info(data);
    }
});
}

</script>

请尝试这种方式。