Vue понимает, что пользователи долго не работают и автоматически выходят из системы.

Vue.js

1. Описание требований

Вчера бэкенд-разработчик попросил меня реализовать экран блокировки веб-страницы, в то время я был сбит с толку и спросил его, почему он сделал то же самое, что и система Android. Его ответ был «красиво выглядит».

Первым делом разберемся с логикой, сначала придем к упрощенному варианту, когда пользователь давно не работал, возвращаемся на страницу входа

2. Идеи

Используйте событие mouseover, чтобы отслеживать, есть ли пользователь, работающий со страницей, напишите таймер с определенным интервалом времени, чтобы определить, не использовалась ли страница в течение длительного времени, если это так, выйдите из системы, очистите токен и вернитесь в страница входа

3. Реализация

[1] Создайте метод localStorage пакета storage.js в папке util.

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] Создайте strict.js в папке util.

Каждые 30 секунд проверять, не открывал ли пользователь страницу в течение 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] Добавьте astrict.js в main.js

import Astrict from '@/utils/astrict'
Vue.use(Astrict)

4. Экран блокировки

Идея реализации экрана блокировки веб-страницы аналогична приведенному выше автоматическому выходу из системы, а небольшая модификация реализована следующим образом:

[1] Пользователь не работает в течение длительного времени, и появляется всплывающее окно установки пароля экрана блокировки, чтобы установить пароль экрана блокировки.

[2] Пароль (password) и состояние экрана блокировки (isLock) хранятся в localStorage и vuex

[3] После успешной настройки перейдите на страницу входа на экран блокировки.

[4] Оцените isLock в vuex в маршрутизации (если состояние экрана блокировки истинно, пользователь не может вернуться к URL-адресу и изменить URL-адрес, чтобы перейти на страницу самостоятельно, в противном случае все в порядке)

[5] Пользователь может разблокировать экран блокировки, введя пароль блокировки экрана, только что установленный на странице входа в систему блокировки экрана.


Статья постоянно обновляется каждую неделю, вы можете искать в WeChat "Особенности интерфейса"Прочтите это в первый раз, ответьте [видео】【книги】 Получите 200G видео информации и 30 книг PDF

​​




Категории