时间戳

首页 > 解决方案 > 如何使用 JavaScript（html 脚本）将 JWT-TOKEN 传递给 localStorage？

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

问题描述

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

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

PS 再一次，整个背面都准备好了。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");
        }
    }

标签： javascriptjavajwtauthorizationfrontend

解决方案

您可以在 localstorage 中添加 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>

请尝试这种方式。

推荐阅读