vue 사용자가 장시간 조작하지 않고 자동으로 로그인 기능을 종료하는 실현 코드 구현

1. 요구 사항 설명
어제 백엔드 개발자가 나에게 웹 자물쇠를 실현하라고 했는데, 당시 나는 안개 속에서 그에게 왜 안드로이드 시스템과 똑같냐고 물었다.그의 대답은 멋있어 보인다.
우선 우리는 논리를 정리하고, 먼저 간소화된 버전을 만들고, 사용자가 장시간 조작하지 않았을 때, 로그인 페이지로 되돌아간다
생각
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 장시간 조작하지 않고 로그인을 종료하는 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!