🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
情況説明
- 主系統單點登錄點擊觸發
window.open()打開本系統。 - 是發佈生產後的新需求:要求退出登錄後
直接關閉當前系統頁面。 本地運行增加了window.close()方法實現功能,點擊退出後頁面沒反應。
排查過程
官方解析中説明,window.close() 方法只能關閉由window.open()或者瀏覽器直接輸入url打開的頁面,其餘情況安全考慮是被限制的。
1. 驗證window.close()失效是否與window.open()觸發打開有關
於是保持原本退出登錄的window.close()方法不變, 嘗試增加打開按鈕,點擊後調用window.open()打開系統鏈接。
<template>
// ......其他代碼
<a href="javascript:;" @click="logout">退出</a>
<a href="javascript:;" @click="logopen">打開</a>
</template>
<script setup>
function logout() {
ElMessageBox.confirm('確定註銷並退出系統嗎?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
userStore.logOut().then((redirect) => {
window.close() // 使用close方法關閉
location.href = redirect || ((import.meta.env.VITE_PUBLIC_PATH) + '/index');
})
}).catch(() => { });
}
function logopen() {
window.open('http://localhost/web/index') // 使用open方法打開
}
</script>
嘗試結果:
打開、退出功能全部正常。- 點擊打開按鈕,跳轉到本地運行的此係統頁面。
- 點擊退出按鈕,打開的頁面關閉,並且基礎的退出清除功能還在。
判斷: 主系統的打開方式沒有問題,需要把焦點集中在此係統的window.close()失效上。
2. 在退出時,先手動打開一個新窗口,再關閉
在搜索時發現了處理辦法,先打開空白窗口觸發window.open(),再close,試一下。
function logout() {
ElMessageBox.confirm('確定註銷並退出系統嗎?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
userStore.logOut().then((redirect) => {
window.open("about:blank","_self") // 先打開一個空白窗口
window.close() // 使用close方法關閉
location.href = redirect || ((import.meta.env.VITE_PUBLIC_PATH) + '/index');
})
}).catch(() => { });
}
嘗試結果: 無效。
3. 調試線上代碼,驗證是否跟環境有關
在本地環境下的嘗試都不成功的情況下,猜測是否跟環境有關,嘗試調試線上代碼。
第一步:定位調試文件
根據退出功能中的提示詞確定註銷並退出系統嗎?找到線上代碼中退出按鈕的所在文件
第二步:創建存放代碼的文件夾並允許修改
第三步:修改內容並保存
第四步:刷新驗證文件是否修改成功
第五步:驗證退出功能
點擊退出,頁面關閉。
⚠️Tips:
- 必須要打開調試器 --- 之前替換的內容才會生效。
- 在調試完成後,務必清除配置,以免對後續產生不必要的影響。
排查結果
由此可得,window.open()的失效跟環境有關,待部署後的再測試。