vue 사용자가 장시간 조작하지 않고 자동으로 로그인 기능을 종료하는 실현 코드 구현
어제 백엔드 개발자가 나에게 웹 자물쇠를 실현하라고 했는데, 당시 나는 안개 속에서 그에게 왜 안드로이드 시스템과 똑같냐고 물었다.그의 대답은 멋있어 보인다.
우선 우리는 논리를 정리하고, 먼저 간소화된 버전을 만들고, 사용자가 장시간 조작하지 않았을 때, 로그인 페이지로 되돌아간다
생각
mouseover 이벤트를 사용하여 사용자 조작 페이지가 있는지 모니터링하고 타이머가 특정 시간 간격으로 페이지를 조작하지 않았는지 검사합니다. 만약에 로그인을 종료하고 token을 지우고 로그인 페이지로 돌아갑니다.
실현
[1]util 폴더 아래에 저장소를 만듭니다.js localStorage 봉인 방법
export default {
setItem(key, value) {
value = JSON.stringify(value);
window.localStorage.setItem(key, value)
},
getItem(key, defaultValue) {
let value = window.localStorage.getItem(key)
try {
value = JSON.parse(value);
} catch {}
return value || defaultValue
},
removeItem(key) {
window.localStorage.removeItem(key)
},
clear() {
window.localStorage.clear()
},
}
【2】util 폴더 아래에astrict를 만듭니다.js
30s 간격으로 사용자가 30분 동안 페이지를 조작하지 않았는지 확인하십시오
// storage
import storage from '@/utils/storage'
import router from "@/common/router"
let lastTime = new Date().getTime()
let currentTime = new Date().getTime()
let timeOut = 30 * 60 * 1000 // : 30
window.onload = function () {
window.document.onmousedown = function () {
stroage.setItem("lastTime", new Date().getTime())
}
};
function checkTimeout() {
currentTime = new Date().getTime() //
lastTime = stroage.getItem("lastTime");
if (currentTime - lastTime > timeOut) { //
// storage ( token)
storage.clear()
//
if(router.currentRouter.name == 'login') return //
router.push({ name: 'login' })
}
}
export default function () {
/* 30 */
window.setInterval(checkTimeout, 30000);
}
【2】main에 있습니다.js 도입 astrict.js
import Astrict from '@/utils/astrict'
Vue.use(Astrict)
4. 자물쇠 스크린웹 페이지의 자물쇠 화면을 실현하는 사고방식은 위에서 자동으로 로그인을 종료하는 것과 유사하다. 약간 바꾸면 다음과 같다.
【1】 사용자가 장시간 조작하지 않고 잠금 화면 비밀번호를 팝업하여 잠금 화면 비밀번호를 설정합니다
[2] 비밀번호(password)와 잠금 화면 상태(isLock)가 localStorage와 vuex에 저장됨
【3】설정 성공 후 잠금 화면 로그인 페이지로 이동
【4】 루트에서 vuex 안의 isLock을 판단합니다(true 잠금 화면 상태는 사용자가 URL을 뒤로 물러나게 할 수 없으며 URL 점프 페이지를 스스로 수정할 수 없습니다).
【5】 사용자가 잠금 화면 로그인 페이지에서 방금 설정한 잠금 화면 비밀번호를 입력하면 잠금 화면을 풀 수 있다
총결산
이 글은 vue 사용자가 장시간 조작하지 않고 로그인을 종료하는 기능을 실현하는 실현 코드에 대한 소개입니다. 더 많은 관련 vue 장시간 조작하지 않고 로그인을 종료하는 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.