如何強制登出閒置網頁的使用者

更新於 發佈於 閱讀時間約 5 分鐘

大綱

  • 為什麼要登出使用者?
  • 思路
  • 實作過程
  • 心得



為什麼要登出使用者?

  • 防止未經授權的人,在使用者暫離時使用系統,公用或共享電腦的環境中尤其重要。
  • 只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。


思路

要如何從前端登出使用者?

若已連接後端API,使用者會在第一次登入時,拿到 cookie。前端可透過 document.cookie 讀取、寫入甚至刪除 cookie。(cookie 並未加密,仍有安全疑慮) 但因為專案尚未連接登入 API,似乎只能把使用者的登入狀態放在 localStorage 操作。


該如何設置、清除和重置 timer?

在 JavaScript 中,透過瀏覽器或Node 等 runtime,可以用 setTimeoutsetInterval 方法來設置計時器。

setTimeout 會設置一次性的計時器,並回傳一個數字id,可利用clearTimeout(id)將該計時器清除。 setInterval 則會設置一個持續計時的計時器,除非利用回傳的 id 執行clearInterval(id) ,否則不會停止計時。登出閒置使用者的功能,看似是要持續監聽使用者行為,實際上會需要在使用者閒置和重新點擊視窗時重置計時器,因此我選用 setTimeout


實作過程

專案的頁面會有很多,可以想見需要一個可重複運用在各元件的邏輯,來檢查使用者的閒置時間是否超過上限,因此我選用 Vue 3 Composition API 的 composable 在元件之間共享邏輯。

在登入表單中,會把使用者 id 透過 activeUserId 這個 key 存進 localStorage 中,等下登出時就會做刪除。

function submitForm() {
console.log("Submitting:", email.value, password.value);
isLoggedIn.value = true;
const userId = (currentUserId.value = Math.random());
localStorage.setItem("activeUserId", userId);
}

使用者被登出後,需要將其導向首頁,這個行為由 Vue Router 的 router.replace() 負責。之所以用 replace 而非 push,是要在瀏覽器的 history 物件中,用首頁取代登出前所在的頁面,防止使用者利用瀏覽器的上一頁按鈕回到之前的頁面。

isLoggedOut.value = true;
console.log("User is logged out due to inactivity");
router.replace("/");

Composable

建立一個 useLogoutIdle composable,每次呼叫時,會先根據 localStorage 裡面有無 activeUserId 值判斷使用者是否登出,接著做 timeout 的處理:在每次window 發生 blur (失去焦點) 事件時,就設置新的計時器,而若使用者點擊視窗觸發 onMouseDown 事件,則將計時器清除。

在 hook 裡面宣告 isLoggedOut ref。

在 hook 裡面宣告 isLoggedOut ref。


完整的 hook 程式碼如下:

Toast

為了避免使用者被登出後,畫面突然跳轉而無通知,我需要一個能跳出 toast 通知的套件。在找套件時,發現之前滿受歡迎的 vue-toastificaiton 停止維護了,因此我使用 vue-toast-notification 套件來告知使用者即將被登出。



vue-toast-notification 樣式簡單好看

vue-toast-notification 樣式簡單好看


心得

此次實作還滿能體會 React 和 Vue 原生的 API 設計哲學之差異:在一般的 js 或 ts 檔案中, ref 可以在檔案中的任何位置呼叫,不像 React 的 custom hook 會限定 hook 一定要在元件頂層或是 use-* 裡面使用,這點在開發上帶來較大的彈性。但這也會容易產生盲點,例如沒有在 startTimeout 裡面帶入 timeout 參數,就會沒辦法在呼叫時吃到頂層宣告的 timeout 值,雖然這是 JS 作用域的問題,但把 hook 限制在元件裡或許比較能避免此錯誤?

直接在檔案頂層使用 ref 很方便。

直接在檔案頂層使用 ref 很方便。

localStorage 裡的資料,都可以在瀏覽器透過 JavaScript 操作,只靠它去儲存使用者的登入狀態會有問題,較安全的做法,是將使用者重新導向後,再透過後端 API 驗證才較安全。

此外,其實這個 function 並沒有符合 composable 可以在各元件抽取出變數的精神,僅止於在 元件之間共享操作 ref 的邏輯罷了,也許有比 composable 更好的做法。

最後,特別感謝 學.誌|Chris Kang 提供用計時器和 localStorage 實作的想法。原本接到需求時,覺得沒有登入 API 就窒礙難行的我果然想的太狹隘了。

留言
avatar-img
留言分享你的想法!
avatar-img
廖偉帆的沙龍
3會員
5內容數
我是Sail,這裡主要分享一些自己覺得有趣的前端議題。
廖偉帆的沙龍的其他內容
2024/05/30
在進行Electron 專案時,後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中,前端的操作經常會更動到 db的資料,此時 Git 就會追蹤到 db 的變化,因此前端在推送檔案到遠端 repo 前,會需要將其移出 Git 追蹤範圍,該怎麼做?
Thumbnail
2024/05/30
在進行Electron 專案時,後端夥伴選擇將 sqlite 資料庫跟專案檔打包成一個執行檔。在開發過程中,前端的操作經常會更動到 db的資料,此時 Git 就會追蹤到 db 的變化,因此前端在推送檔案到遠端 repo 前,會需要將其移出 Git 追蹤範圍,該怎麼做?
Thumbnail
2024/05/13
在串接第三方 API時,需要定期刷新 token,那有沒有辦法針對 request 和 response 做配置,在 token 過期時先做刷新、再做請求呢?本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
Thumbnail
2024/05/13
在串接第三方 API時,需要定期刷新 token,那有沒有辦法針對 request 和 response 做配置,在 token 過期時先做刷新、再做請求呢?本文要介紹利用 axios 套件提供的攔截器刷新 token 的作法。
Thumbnail
2024/05/01
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
2024/05/01
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
看更多
你可能也想看
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
探討會所如何自主接納新會員,特別是對於有精神疾病歷史的人士的包容性。文章指出,只有在會員對社群安全構成重大威脅時,會所才可暫停或取消其會籍。此外,文章也強調會所如何應對潛在的威脅,以確保所有會員都能在安全的環境中參與活動。
Thumbnail
探討會所如何自主接納新會員,特別是對於有精神疾病歷史的人士的包容性。文章指出,只有在會員對社群安全構成重大威脅時,會所才可暫停或取消其會籍。此外,文章也強調會所如何應對潛在的威脅,以確保所有會員都能在安全的環境中參與活動。
Thumbnail
  自從之前發現被對岸網站盜文,就決定在文章中間或末端加上一些文字聲明。由於我連載的平台有好幾個,所以花了一些時間,把每一個平台的每一篇文全都加上聲明,想藉此查看盜文都是從哪個連載平台盜的﹙雖然本來我心裡就有底了,但總要有證據嘛﹚。   而且,因為怕盜文時設有自動屏蔽、替換功能,我還特地將文字聲明
Thumbnail
  自從之前發現被對岸網站盜文,就決定在文章中間或末端加上一些文字聲明。由於我連載的平台有好幾個,所以花了一些時間,把每一個平台的每一篇文全都加上聲明,想藉此查看盜文都是從哪個連載平台盜的﹙雖然本來我心裡就有底了,但總要有證據嘛﹚。   而且,因為怕盜文時設有自動屏蔽、替換功能,我還特地將文字聲明
Thumbnail
【駭入別人銷售漏斗,模仿驗證有效流程】
Thumbnail
【駭入別人銷售漏斗,模仿驗證有效流程】
Thumbnail
嗨!親愛的格友, 近期 vocus 平台上持續有新的格友入駐,亦有出現少數惡意人士仿冒其他創作者的帳號,因此我們希望透過這篇文章,讓格友們知道並理解 vocus 重視所有會員的帳號安全、嚴禁仿冒帳號的情形發生。
Thumbnail
嗨!親愛的格友, 近期 vocus 平台上持續有新的格友入駐,亦有出現少數惡意人士仿冒其他創作者的帳號,因此我們希望透過這篇文章,讓格友們知道並理解 vocus 重視所有會員的帳號安全、嚴禁仿冒帳號的情形發生。
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
1. 如何分辨詐騙、避免被詐騙 2. 掃毒、增強帳號安全、多段驗證、安全金鑰 3.快速取回帳號
Thumbnail
1. 如何分辨詐騙、避免被詐騙 2. 掃毒、增強帳號安全、多段驗證、安全金鑰 3.快速取回帳號
Thumbnail
在這個網路無所不在的時代,我們經常享有資訊的自由流動和無限的知識。 想像一下,你打開手機或電腦,想查看最新的新聞、分享生活的點點滴滴,或是瀏覽一下娛樂內容,但卻發現許多網站和應用程式都無法存取。 聽起來是不是很難以置信? 但對世界上許多國家的人來說,這是他們日常生活的一部分...
Thumbnail
在這個網路無所不在的時代,我們經常享有資訊的自由流動和無限的知識。 想像一下,你打開手機或電腦,想查看最新的新聞、分享生活的點點滴滴,或是瀏覽一下娛樂內容,但卻發現許多網站和應用程式都無法存取。 聽起來是不是很難以置信? 但對世界上許多國家的人來說,這是他們日常生活的一部分...
Thumbnail
手機及網路已深入日常生活與消費習慣,春節期間不管是出遊派還是在宅派都會使用手機或各種網路服務,例如查詢出遊走春資訊、景點打卡、簡訊拜年、網路購物、線上追劇等等。對此,數位發展部資通安全署指出,使用便利服務的同時,也要注意資安防護,像是不法集團常常利用釣魚網站假連結,騙取民眾輸入個資或信用卡資料。
Thumbnail
手機及網路已深入日常生活與消費習慣,春節期間不管是出遊派還是在宅派都會使用手機或各種網路服務,例如查詢出遊走春資訊、景點打卡、簡訊拜年、網路購物、線上追劇等等。對此,數位發展部資通安全署指出,使用便利服務的同時,也要注意資安防護,像是不法集團常常利用釣魚網站假連結,騙取民眾輸入個資或信用卡資料。
Thumbnail
在面對衝突時你也會不敢說話,只會透過用隱忍、翻舊帳、訊息不獨不回或者暗諷的方式來保護自己嗎?也許你也是一位「隱形攻擊者」。
Thumbnail
在面對衝突時你也會不敢說話,只會透過用隱忍、翻舊帳、訊息不獨不回或者暗諷的方式來保護自己嗎?也許你也是一位「隱形攻擊者」。
Thumbnail
談了許多網路安全的議題,提醒民眾要注意哪些事情,建構哪些網路安全思維,讓我們可以降低踏入詐騙陷阱的風險。但除了民眾本身要不斷學習、提升防詐意識外,是不是還有其他方面的作法呢? 本文就來聊聊在企業端可以做些什麼。 要打造一個密不可破的防護網,企業端就不能夠缺席。 舉幾個例子讓大家知道。
Thumbnail
談了許多網路安全的議題,提醒民眾要注意哪些事情,建構哪些網路安全思維,讓我們可以降低踏入詐騙陷阱的風險。但除了民眾本身要不斷學習、提升防詐意識外,是不是還有其他方面的作法呢? 本文就來聊聊在企業端可以做些什麼。 要打造一個密不可破的防護網,企業端就不能夠缺席。 舉幾個例子讓大家知道。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News