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

huangapple
go评论96阅读模式
英文:

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

问题

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

重要提示：javascript必须是纯净的，不能使用框架（angular，node等）。我应该如何做？

P.S. 再次强调，整个后端已经准备就绪。Rest授权方法可用（也就是说，我输入我的login和password - 就会得到一个jwt token）。

Java - 授权方法

  1. public ResponseEntity<Map<String, String>> authorization(@RequestBody AuthenticationRequestDTO requestDto) {
  2.     try {
  3.         String login = requestDto.getLogin();
  4.         authenticationManager
  5.                 .authenticate(new UsernamePasswordAuthenticationToken(login, requestDto.getPassword()));
  7.         User user = userRepository.getByLogin(login);
  9.         if (user == null) {
  10.             throw new AuthenticationServiceException("ddwd");
  11.         }
  13.         String token = jwtTokenProvider.createToken(login, user.getRole());
  15.         Map<String, String> response = new HashMap<>();
  16.         response.put("login", login);
  17.         response.put("token", token);
  19.         return ResponseEntity.ok(response);
  21.     } catch (AuthenticationServiceException e) {
  22.         log.error("Error: ", e);
  23.         throw new AuthenticationServiceException("Invalid login");
  24.     }
  25. }

图片已移除。

英文:

I am writing a Rest MVC application for an online coffee and tea store. The following technologies are used: Spring-Boot, Hibernate, PostgreSQL, Gradle, Thymeleaf, HTML, CSS. I have the whole backend ready, it remains to make a frontend. At the moment I'm making an authorization page. The page itself is ready with HTML and CSS, now you need to make the authorization logic itself. To do this, I need to write a script in javascript so that my jwt token is stored in localStorage. The point is that I don't know how to implement this, how to pass my token through the header using javascripte in localStorage.

Important: javascript must be clean, without using frameworks (angular, node ...). How should I do it?

P.S. Again, the whole backand is ready. Rest-authorization method works (that is, I enter my login and password - I get a jwt token).

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

Java - authorization method

  1.  public ResponseEntity&lt;Map&lt;String, String&gt;&gt; authorization(@RequestBody AuthenticationRequestDTO requestDto) {
  2.         try {
  3.             String login = requestDto.getLogin();
  4.             authenticationManager
  5.                     .authenticate(new UsernamePasswordAuthenticationToken(login, requestDto.getPassword()));
  7.             User user = userRepository.getByLogin(login);
  9.             if (user == null) {
  10.                 throw new AuthenticationServiceException(&quot;ddwd&quot;);
  11.             }
  13.             String token = jwtTokenProvider.createToken(login, user.getRole());
  15.             Map&lt;String, String&gt; response = new HashMap&lt;&gt;();
  16.             response.put(&quot;login&quot;, login);
  17.             response.put(&quot;token&quot;, token);
  19.             return ResponseEntity.ok(response);
  21.         } catch (AuthenticationServiceException e) {
  22.             log.error(&quot;Error: &quot;, e);
  23.             throw new AuthenticationServiceException(&quot;Invalid login&quot;);
  24.         }
  25.     }

答案1

得分: 1

你可以将JWT令牌存储在本地存储中，然后在API调用时检索/读取并传递该值。以下是设置和从本地存储中读取值的示例：

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  4. function createLocalstorageItem(txtJwtTokenValue) {
  5.   sessionStorage.setItem("jwtToken", txtJwtTokenValue);
  6. }
  8. function readValue() {
  9.  var jwtToken = sessionStorage.getItem("jwtToken");
  10.  console.log("jwtToken : "+jwtToken );
  11.  return jwtToken ;
  12. }
  14. function getDataFromAPiByPassingJwtTokenInHeader(){
  15. var jwtToken=readValue();
  16. $.ajax({
  17.     url: 'https://url.com',
  18.     type: 'post',
  19.     data: {},
  20.     headers: {
  21.         "Authorization": "Bearer "+jwtToken,   //关键词 **Bearer** 应该在令牌字符串之前传递
  22.     },
  23.     dataType: 'json',
  24.     success: function (data) {
  25.         console.info(data);
  26.     }
  27. });
  28. }
  30. </script>
  31. 请尝试这种方式。
英文:

You can add the JWT token in localstorage and retrieve/read and pass the value with your API calls. below is the example for setting and reading value from localstorage.

  1. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script type=&quot;text/javascript&quot;&gt;
  4. function createLocalstorageItem(txtJwtTokenValue) {
  5.   sessionStorage.setItem(&quot;jwtToken&quot;, txtJwtTokenValue);
  6. }
  8. function readValue() {
  9.  var jwtToken = sessionStorage.getItem(&quot;jwtToken&quot;);
  10. console.log(&quot;jwtToken : &quot;+jwtToken );
  11. return jwtToken ;
  13. }
  14.     
  15. function getDataFromAPiByPassingJwtTokenInHeader(){
  16. var jwtToken=readValue();
  17. $.ajax({
  18.     url: &#39;https://url.com&#39;,
  19.     type: &#39;post&#39;,
  20.     data: {},
  21.     headers: {
  22.         Bearer Token: &quot;Bearer &quot;+jwtToken,   //key word **Bearer**  should pass before the token string
  23.     },
  24.     dataType: &#39;json&#39;,
  25.     success: function (data) {
  26.         console.info(data);
  27.     }
  28. });
  29. }
  31. &lt;/script&gt;

please try this way.

huangapple
  • 本文由 发表于 2020年9月11日 00:41:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/63834132.html
  • authorization
  • frontend
  • java
  • javascript
  • jwt
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定