简柏林 / thingskit-scada · Commits

Commit 52214323d1fd648f17d9674acc4312c813b0b9f9

Authored by ww
1 parent 885199b8

perf: 优化分享页面token模态框

Inline Side-by-side
Showing 3 changed files with 54 additions and 16 deletions
  1 +const isShareMode = (() => {
  2 + const urlParams = Array.from(new URLSearchParams(window.location.href)).reduce((prev, [key, value]) => ({ ...prev, [key]: value }), {})
  3 + return urlParams.share && urlParams.share === 'SCADA'
  4 +})()
  5 +
1 const GLOBAL_STORAGE_KEY = (() => { 6 const GLOBAL_STORAGE_KEY = (() => {
2 const isDEV = location.href.includes('dev=1') 7 const isDEV = location.href.includes('dev=1')
3 const DEVELOPMENT = 'DEVELOPMENT' 8 const DEVELOPMENT = 'DEVELOPMENT'
@@ -19,10 +24,16 @@ const GLOBAL_TOKEN = (() => { @@ -19,10 +24,16 @@ const GLOBAL_TOKEN = (() => {
19 * @type {{JWT_TOKEN: {value: string}}} 24 * @type {{JWT_TOKEN: {value: string}}}
20 */ 25 */
21 const common = ls.get(GLOBAL_STORAGE_KEY) 26 const common = ls.get(GLOBAL_STORAGE_KEY)
22 - return {  
23 - token: common && common.JWT_TOKEN && common.JWT_TOKEN.value,  
24 - refreshToken: common && common.REFRESH_TOKEN && common.REFRESH_TOKEN.value,  
25 - } 27 +
  28 + return isShareMode
  29 + ? {
  30 + token: common && common.SHARE_JWT_TOKEN && common.SHARE_JWT_TOKEN.value,
  31 + refreshToken: common && common.SHARE_REFRESH_TOKEN && common.SHARE_REFRESH_TOKEN.value,
  32 + }
  33 + : {
  34 + token: common && common.JWT_TOKEN && common.JWT_TOKEN.value,
  35 + refreshToken: common && common.REFRESH_TOKEN && common.REFRESH_TOKEN.value,
  36 + }
26 })() 37 })()
27 38
28 39
@@ -54,3 +65,5 @@ const GLOBAL_WS_URL = () => { @@ -54,3 +65,5 @@ const GLOBAL_WS_URL = () => {
54 const reg = /^https/ 65 const reg = /^https/
55 return `${reg.test(href) ? 'wss' : 'ws'}://${host}/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN.token}` 66 return `${reg.test(href) ? 'wss' : 'ws'}://${host}/api/ws/plugins/telemetry?token=${GLOBAL_TOKEN.token}`
56 } 67 }
  68 +
  69 +
@@ -4009,7 +4009,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) { @@ -4009,7 +4009,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
4009 * @description 4009 * @description
4010 * @type {{userId: string, dev?: string, share?: string, configuration: string, publicId?: string }} 4010 * @type {{userId: string, dev?: string, share?: string, configuration: string, publicId?: string }}
4011 */ 4011 */
4012 - const urlParams = (function () { 4012 + var urlParams = (function () {
4013 var result = new Object(); 4013 var result = new Object();
4014 var params = window.location.search.slice(1).split('&'); 4014 var params = window.location.search.slice(1).split('&');
4015 4015
@@ -4023,7 +4023,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) { @@ -4023,7 +4023,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
4023 4023
4024 return result; 4024 return result;
4025 })(); 4025 })();
4026 - 4026 +
4027 if (urlParams.userId) { 4027 if (urlParams.userId) {
4028 /** 4028 /**
4029 * @description 小程序第三方登录获取token 4029 * @description 小程序第三方登录获取token
@@ -4121,21 +4121,28 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) { @@ -4121,21 +4121,28 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
4121 function createAccessTokenFormLayer() { 4121 function createAccessTokenFormLayer() {
4122 var field = 'accessCredentials' 4122 var field = 'accessCredentials'
4123 var formSubmitFilter = 'formData' 4123 var formSubmitFilter = 'formData'
  4124 + var tokenForm = 'tokenForm'
4124 var index = layer.open({ 4125 var index = layer.open({
4125 type: 1, 4126 type: 1,
4126 - title: '访问令牌', 4127 + title: null,
4127 area: ['350px', '200px'], 4128 area: ['350px', '200px'],
4128 closeBtn: 0, 4129 closeBtn: 0,
4129 content: ` 4130 content: `
4130 - <section style="padding: 20px;display: flex;justify-content: center;align-items: center;flex-direction: column;">  
4131 - <form class="layui-form" action="">  
4132 - <div class="layui-form-item">  
4133 - <label class="layui-form-label" style="width: 60px;padding: 9px 0;">访问令牌</label>  
4134 - <div class="layui-input-block" style="margin-left: 70px;"> 4131 + <section style="padding: 20px;display: flex;justify-content: center;align-items: center;flex-direction: column;height: 160px;">
  4132 + <form id="${tokenForm}" class="layui-form" style="width: 100%;">
  4133 + <label style="margin-bottom: 10px; display: block;">访问令牌</label>
  4134 + <div class="layui-form-item" style="display: flex; justify-content: center; aligns-item: center;">
  4135 + <div style="width: 70%">
4135 <input required lay-verify="required" type="text" name="${field}" lay-verify="title" autocomplete="off" placeholder="请输入访问令牌" class="layui-input"> 4136 <input required lay-verify="required" type="text" name="${field}" lay-verify="title" autocomplete="off" placeholder="请输入访问令牌" class="layui-input">
4136 </div> 4137 </div>
  4138 + <button lay-submit lay-filter="${formSubmitFilter}" class="layui-btn layui-btn-normal" style="width: 30%;display: flex; justify-content: center; align-items: center;background-color: #1E9FFF;">
  4139 + <svg t="1682068997810" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="79416" width="24" height="24">
  4140 + <path d="M512 928H128c-19.2 0-32-12.8-32-32V128c0-19.2 12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32H160v704h352c19.2 0 32 12.8 32 32s-12.8 32-32 32z" fill="#fff" p-id="79417" />
  4141 + <path d="M534.4 736c-9.6 0-16-3.2-22.4-9.6l-192-192c-12.8-12.8-12.8-32 0-44.8l192-192c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L387.2 512l169.6 169.6c12.8 12.8 12.8 32 0 44.8-6.4 6.4-16 9.6-22.4 9.6z" fill="#fff" p-id="79418"/>
  4142 + <path d="M896 544H342.4c-19.2 0-32-12.8-32-32s12.8-32 32-32H896c19.2 0 32 12.8 32 32s-12.8 32-32 32z" fill="#fff" p-id="79419" />
  4143 + </svg>
  4144 + </button>
4137 </div> 4145 </div>
4138 - <button lay-submit lay-filter="${formSubmitFilter}" type="button" class="layui-btn layui-btn-normal" style="width: 100%; margin-top: 10px;">进入</button>  
4139 </form> 4146 </form>
4140 </section> 4147 </section>
4141 `, 4148 `,
@@ -4144,6 +4151,17 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) { @@ -4144,6 +4151,17 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
4144 form.on(`submit(${formSubmitFilter})`, function (data) { 4151 form.on(`submit(${formSubmitFilter})`, function (data) {
4145 var value = data.field.accessCredentials 4152 var value = data.field.accessCredentials
4146 getShareContentData(value, index) 4153 getShareContentData(value, index)
  4154 + return false
  4155 + })
  4156 +
  4157 + var formEl = document.getElementById(tokenForm)
  4158 + formEl.addEventListener('keyup', (event) => {
  4159 + event.preventDefault()
  4160 + return false
  4161 + })
  4162 +
  4163 + formEl.addEventListener('submit', (event) => {
  4164 + return false
4147 }) 4165 })
4148 } 4166 }
4149 4167
@@ -2,10 +2,14 @@ let requestQueue = [] @@ -2,10 +2,14 @@ let requestQueue = []
2 2
3 const JWT_TOKEN_KEY = 'JWT_TOKEN'; 3 const JWT_TOKEN_KEY = 'JWT_TOKEN';
4 const REFRESH_TOKEN_KEY = 'REFRESH_TOKEN'; 4 const REFRESH_TOKEN_KEY = 'REFRESH_TOKEN';
  5 +
  6 +const SHARE_JWT_TOKEN_KEY = 'SHARE_JWT_TOKEN';
  7 +const SHARE_REFRESH_TOKEN_KEY = 'SHARE_REFRESH_TOKEN';
5 /** 8 /**
6 * custom http request 9 * custom http request
7 */ 10 */
8 function createAxios(options) { 11 function createAxios(options) {
  12 +
9 /** 13 /**
10 * 创建实例 14 * 创建实例
11 */ 15 */
@@ -48,6 +52,7 @@ function createAxios(options) { @@ -48,6 +52,7 @@ function createAxios(options) {
48 // } 52 // }
49 53
50 doRefreshToken() 54 doRefreshToken()
  55 + return
51 } 56 }
52 57
53 const message = error.response && error.response.data && error.response.data.message 58 const message = error.response && error.response.data && error.response.data.message
@@ -84,9 +89,11 @@ function doRefreshToken(params) { @@ -84,9 +89,11 @@ function doRefreshToken(params) {
84 Object.assign(GLOBAL_TOKEN, { refreshToken, token }) 89 Object.assign(GLOBAL_TOKEN, { refreshToken, token })
85 const ls = createStorage({ storage: localStorage }) 90 const ls = createStorage({ storage: localStorage })
86 const originData = ls.get(GLOBAL_STORAGE_KEY) 91 const originData = ls.get(GLOBAL_STORAGE_KEY)
87 - const newRefreshToken = ls.generatorValue(REFRESH_TOKEN_KEY, refreshToken, true)  
88 - const newToken = ls.generatorValue(REFRESH_TOKEN_KEY, token, true)  
89 - ls.set(GLOBAL_STORAGE_KEY, Object.assign(originData, { [REFRESH_TOKEN_KEY]: newRefreshToken, [JWT_TOKEN_KEY]: newToken }), true) 92 + const refreshTokenKey = isShareMode ? SHARE_REFRESH_TOKEN_KEY : REFRESH_TOKEN_KEY
  93 + const tokenKey = isShareMode ? SHARE_JWT_TOKEN_KEY : JWT_TOKEN_KEY
  94 + const newRefreshToken = ls.generatorValue(refreshTokenKey, refreshToken, true)
  95 + const newToken = ls.generatorValue(tokenKey, token, true)
  96 + ls.set(GLOBAL_STORAGE_KEY, Object.assign(originData, { [refreshTokenKey]: newRefreshToken, [tokenKey]: newToken }), true)
90 97
91 // try { 98 // try {
92 // requestQueue.forEach(item => { 99 // requestQueue.forEach(item => {