如何使用 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 ...）。我应该怎么做？

P.S。再次，整个背部准备就绪。 Rest-授权方法有效（也就是说，我输入 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

您可以在 localstorage 和 retrieve/read 中添加 JWT 令牌，并通过 API 调用传递该值。下面是从 localstorage 设置和读取值的示例。

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

请尝试这种方式。

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

How to pass JWT-TOKEN to localStorage using JavaScript (script for html)?

javascript

java

frontend

authorization

jwt