ssoLogin.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8. />
  9. </head>
  10. <body>
  11. <div id="app1" class="container">
  12. <div style="margin-top: 30px">
  13. <h1>登录中</h1>
  14. <p>{{ message }}</p>
  15. </div>
  16. </div>
  17. <script
  18. type="text/javascript"
  19. src="/static/jquery/dist/jquery.min.js"
  20. ></script>
  21. <script
  22. type="text/javascript"
  23. src="/static/vue/dist/vue.global.prod.js"
  24. ></script>
  25. <script>
  26. Vue.createApp({
  27. data: function () {
  28. return {
  29. token: "",
  30. urlRoot: "",
  31. languageId: "zh-CN",
  32. message: "正在检查您的权限,请稍等...",
  33. };
  34. },
  35. mounted: function () {
  36. this.urlRoot = this.getRootPath() + "/";
  37. this.getParams();
  38. },
  39. methods: {
  40. // 获取参数后登录
  41. getParams: function () {
  42. var _self = this;
  43. const url = window.location.href;
  44. const params = _self.getQueryString();
  45. _self.token = params.token;
  46. this.azureSamlLogin();
  47. },
  48. // 单点登录
  49. azureSamlLogin: function () {
  50. const _self = this;
  51. const params = {
  52. token:_self.token,
  53. languageId:_self.languageId,
  54. }
  55. $.ajax({
  56. url: _self.urlRoot + `api/SsoResource/login`,
  57. type: "post",
  58. data:params,
  59. success: function (loginInfo) {
  60. if (loginInfo.errorCode == 0) {
  61. _self.setLoginInfo(loginInfo.data);
  62. } else {
  63. _self.message = loginInfo.errorMessage;
  64. }
  65. },
  66. error: function (XMLHttpRequest, textStatus, errorThrown) {},
  67. });
  68. },
  69. // 设置LoginInfo
  70. setLoginInfo: function (loginInfo) {
  71. var _self = this;
  72. _self.clearLocalStorage();
  73. localStorage.setItem("#token", loginInfo.token);
  74. localStorage.setItem("#accountId", loginInfo.accountId);
  75. localStorage.setItem("#languageSelected", _self.languageId);
  76. localStorage.setItem("#LoginInfo", JSON.stringify(loginInfo));
  77. window.location.href = _self.urlRoot + "#/desktop/dashboard";
  78. },
  79. // 获取参数函数
  80. getQueryString: function () {
  81. const url = window.location.href;
  82. const urlStr = url.split("?")[1];
  83. const urlSearchParams = new URLSearchParams(urlStr);
  84. const result = Object.fromEntries(urlSearchParams.entries());
  85. return result;
  86. },
  87. // 获取主机地址
  88. getRootPath: function () {
  89. var protocol = window.location.protocol;
  90. var host = window.location.host;
  91. var localhostPath = protocol + "//" + host;
  92. return localhostPath;
  93. },
  94. // 清理localStorage
  95. clearLocalStorage: function () {
  96. // 需要保留的参数列表
  97. var reserveParams = [
  98. "hostPageBaseURL",
  99. "workShopId",
  100. "resourceInstanceId",
  101. "resourceInstanceName",
  102. "apsBaseUrl",
  103. "cameraBaseURL",
  104. ];
  105. //存放的信息
  106. var reserveParamValues = [];
  107. //获取参数信息
  108. var len = reserveParams.length;
  109. for (let i = 0; i < len; i++) {
  110. var reserveParam = reserveParams[i];
  111. var reserveParamValue = "";
  112. if (localStorage.getItem(reserveParam) != undefined) {
  113. reserveParamValue = localStorage.getItem(reserveParam);
  114. }
  115. reserveParamValues.push(reserveParamValue);
  116. }
  117. //清理localStorage
  118. window.localStorage.clear();
  119. //还原参数信息
  120. for (let i = 0; i < len; i++) {
  121. localStorage.setItem(reserveParams[i], reserveParamValues[i]);
  122. }
  123. },
  124. },
  125. }).mount("#app1");
  126. </script>
  127. </body>
  128. </html>