index.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>首页</title>
  6. <!-- jQuery:操作 dom、发起请求等 -->
  7. <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.2/jquery.min.js" type="application/javascript"></script>
  8. <script type="application/javascript">
  9. /**
  10. * 跳转单点登录
  11. */
  12. function passwordLogin() {
  13. window.location.href = '/login.html'
  14. }
  15. /**
  16. * 修改昵称
  17. */
  18. function updateNickname() {
  19. const nickname = prompt("请输入新的昵称", "");
  20. if (!nickname) {
  21. return;
  22. }
  23. // 更新用户的昵称
  24. const accessToken = localStorage.getItem('ACCESS-TOKEN');
  25. $.ajax({
  26. url: "http://127.0.0.1:18080/user/update?nickname=" + nickname,
  27. method: 'PUT',
  28. headers: {
  29. 'Authorization': 'Bearer ' + accessToken
  30. },
  31. success: function (result) {
  32. if (result.code !== 0) {
  33. alert('更新昵称失败,原因:' + result.msg)
  34. return;
  35. }
  36. alert('更新昵称成功!');
  37. $('#nicknameSpan').html(nickname);
  38. }
  39. });
  40. }
  41. /**
  42. * 刷新令牌
  43. */
  44. function refreshToken() {
  45. const refreshToken = localStorage.getItem('REFRESH-TOKEN');
  46. if (!refreshToken) {
  47. alert("获取不到刷新令牌");
  48. return;
  49. }
  50. $.ajax({
  51. url: "http://127.0.0.1:18080/auth/refresh-token?refreshToken=" + refreshToken,
  52. method: 'POST',
  53. success: function (result) {
  54. if (result.code !== 0) {
  55. alert('刷新访问令牌失败,原因:' + result.msg)
  56. return;
  57. }
  58. alert('更新访问令牌成功!');
  59. $('#accessTokenSpan').html(result.data.access_token);
  60. // 设置到 localStorage 中
  61. localStorage.setItem('ACCESS-TOKEN', result.data.access_token);
  62. localStorage.setItem('REFRESH-TOKEN', result.data.refresh_token);
  63. }
  64. });
  65. }
  66. /**
  67. * 登出,删除访问令牌
  68. */
  69. function logout() {
  70. const accessToken = localStorage.getItem('ACCESS-TOKEN');
  71. if (!accessToken) {
  72. location.reload();
  73. return;
  74. }
  75. $.ajax({
  76. url: "http://127.0.0.1:18080/auth/logout",
  77. method: 'POST',
  78. headers: {
  79. 'Authorization': 'Bearer ' + accessToken
  80. },
  81. success: function (result) {
  82. if (result.code !== 0) {
  83. alert('退出登录失败,原因:' + result.msg)
  84. return;
  85. }
  86. alert('退出登录成功!');
  87. // 删除 localStorage 中
  88. localStorage.removeItem('ACCESS-TOKEN');
  89. localStorage.removeItem('REFRESH-TOKEN');
  90. location.reload();
  91. }
  92. });
  93. }
  94. $(function () {
  95. const accessToken = localStorage.getItem('ACCESS-TOKEN');
  96. // 情况一:未登录
  97. if (!accessToken) {
  98. $('#noLoginDiv').css("display", "block");
  99. return;
  100. }
  101. // 情况二:已登录
  102. $('#yesLoginDiv').css("display", "block");
  103. $('#accessTokenSpan').html(accessToken);
  104. // 获得登录用户的信息
  105. $.ajax({
  106. url: "http://127.0.0.1:18080/user/get",
  107. method: 'GET',
  108. headers: {
  109. 'Authorization': 'Bearer ' + accessToken
  110. },
  111. success: function (result) {
  112. if (result.code !== 0) {
  113. alert('获得个人信息失败,原因:' + result.msg)
  114. return;
  115. }
  116. $('#nicknameSpan').html(result.data.nickname);
  117. }
  118. });
  119. })
  120. </script>
  121. </head>
  122. <body>
  123. <!-- 情况一:未登录:1)跳转 ruoyi-vue-pro 的 SSO 登录页 -->
  124. <div id="noLoginDiv" style="display: none">
  125. 您未登录,点击 <a href="#" onclick="passwordLogin()">跳转 </a> 账号密码登录
  126. </div>
  127. <!-- 情况二:已登录:1)展示用户信息;2)刷新访问令牌;3)退出登录 -->
  128. <div id="yesLoginDiv" style="display: none">
  129. 您已登录!<button onclick="logout()">退出登录</button> <br />
  130. 昵称:<span id="nicknameSpan"> 加载中... </span> <button onclick="updateNickname()">修改昵称</button> <br />
  131. 访问令牌:<span id="accessTokenSpan"> 加载中... </span> <button onclick="refreshToken()">刷新令牌</button> <br />
  132. </div>
  133. </body>
  134. <style>
  135. body { /** 页面居中 */
  136. border-radius: 20px;
  137. height: 350px;
  138. position: absolute;
  139. left: 50%;
  140. top: 50%;
  141. transform: translate(-50%,-50%);
  142. }
  143. </style>
  144. </html>