index.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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 ssoLogin() {
  13. const clientId = 'yudao-sso-demo-by-code'; // 可以改写成,你的 clientId
  14. const redirectUri = encodeURIComponent('http://127.0.0.1:18080/callback.html'); // 注意,需要使用 encodeURIComponent 编码地址
  15. const responseType = 'code'; // 1)授权码模式,对应 code;2)简化模式,对应 token
  16. window.location.href = 'http://127.0.0.1:1024/sso?client_id=' + clientId
  17. + '&redirect_uri=' + redirectUri
  18. + '&response_type=' + responseType;
  19. }
  20. $(function () {
  21. const accessToken = localStorage.getItem('ACCESS-TOKEN');
  22. // 情况一:未登录
  23. if (!accessToken) {
  24. $('#noLoginDiv').css("display", "block");
  25. return;
  26. }
  27. // 情况二:已登录
  28. $('#yesLoginDiv').css("display", "block");
  29. $('#accessTokenSpan').html(accessToken);
  30. // 获得登录用户的信息
  31. $.ajax({
  32. url: "http://127.0.0.1:18080/user/get",
  33. method: 'GET',
  34. headers: {
  35. 'Authentication': 'Bearer ' + accessToken
  36. },
  37. success: function (result) {
  38. if (result.code !== 0) {
  39. alert('获得个人信息失败,原因:' + result.msg)
  40. return;
  41. }
  42. $('#nicknameSpan').html(result.data.nickname);
  43. }
  44. });
  45. })
  46. </script>
  47. </head>
  48. <body>
  49. <!-- 情况一:未登录:1)跳转 ruoyi-vue-pro 的 SSO 登录页 -->
  50. <div id="noLoginDiv" style="display: none">
  51. 您未登录,点击 <a href="#" onclick="ssoLogin()">跳转 </a> SSO 单点登录
  52. </div>
  53. <!-- 情况二:已登录:1)展示用户信息;2)刷新访问令牌;3)退出登录 -->
  54. <div id="yesLoginDiv" style="display: none">
  55. 您已登录!<button>退出登录</button> <br />
  56. 昵称:<span id="nicknameSpan"> 加载中... </span> <button>修改昵称</button> <br />
  57. 访问令牌:<span id="accessTokenSpan"> 加载中... </span> <br />
  58. </div>
  59. </body>
  60. <style>
  61. body { /** 页面居中 */
  62. border-radius: 20px;
  63. height: 350px;
  64. position: absolute;
  65. left: 50%;
  66. top: 50%;
  67. transform: translate(-50%,-50%);
  68. }
  69. </style>
  70. </html>