Vben Admin 源码学习:状态管理-锁定屏幕

前言

本文将对 Vue-Vben-Admin 的状态管理之锁屏源码实现进行分析解读，耐心读完，相信您一定会有所收获!

lock.ts 锁屏

文件 src\store\modules\lock.ts 声明导出一个store实例 useLockStore。

// 错误日志存储实例
export const useLockStore = defineStore({
  id: 'app-lock', 
  state: {},
  getters: {}
  actions：{}   
}); 

State

状态对象定义了锁屏信息 lockInfo，初始值从缓存中获取加载 。

state: (): LockState => ({
  lockInfo: Persistent.getLocal(LOCK_INFO_KEY),
}), 

Actions

setLockInfo 方法用于设置锁屏信息并将其持久化存储。 resetLockInfo 方法用于移除持久化存储的锁屏信息并将状态对象值置为 null 。

actions: {
  setLockInfo(info: LockInfo) {
    this.lockInfo = Object.assign({}, this.lockInfo, info);
    Persistent.setLocal(LOCK_INFO_KEY, this.lockInfo, true);
  },
  resetLockInfo() {
    Persistent.removeLocal(LOCK_INFO_KEY, true);
    this.lockInfo = null;
  }, 
},

unLock 方法用于解除锁屏。

1. 根据输入的解锁密码是否跟状态存储是否一致，
2. 若一致，调用 resetLockInfo方法重置状态。
3. 若不一致，调用登录用户存储状态实例 useUserStore()，尝试使用此密码重新登录 userStore.login()，执行 tryLogin() 方法。
   • 若登录成功，调用 resetLockInfo方法重置状态，解除锁屏。
   • 若登录失败，锁屏解锁无效。

  async unLock(password?: string) {
    const userStore = useUserStore();
    if (this.lockInfo?.pwd === password) {
      this.resetLockInfo();
      return true;
    }
    const tryLogin = async () => {
      try {
        const username = userStore.getUserInfo?.username;
        const res = await userStore.login({
          username,
          password: password!,
          goHome: false,
          mode: 'none',
        });
        if (res) {
          this.resetLockInfo();
        }
        return res;
      } catch (error) {
        return false;
      }
    };
    return await tryLogin();
  },

锁定屏幕功能

登录系统后，鼠标移至右上角用户信息处，出现下列菜单，点击 锁定屏幕 。

输入锁屏密码锁定系统屏幕。

代码实现如下，调用 setLockInfo方法。

// src\layouts\default\header\components\lock\LockModal.vue
const lockStore = useLockStore();
...

async function handleLock() {
  const values = (await validateFields()) as any;
  const password: string | undefined = values.password;
  closeModal();

  lockStore.setLockInfo({
    isLock: true,
    pwd: password,
  });
  
}

锁屏状态显示日期时间还有解锁按钮。

读取状态信息，isLock 已经设置为 true, 页面 LockPage 将展现。

// src\views\sys\lock\index.vue

<template>
  <transition name="fade-bottom" mode="out-in">
    <LockPage v-if="getIsLock" />
  </transition>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import LockPage from './LockPage.vue';
  import { useLockStore } from '/@/store/modules/lock';

  const lockStore = useLockStore();
  const getIsLock = computed(() => lockStore?.getLockInfo?.isLock ?? false);
</script>

点击解锁按钮，输入锁屏密码，点击“进入系统”，即可重新进入系统。

代码实现如下，调用 unLock方法。

// src\views\sys\lock\LockPage.vue
async function unLock() {
  if (!password.value) {
    return;
  }
  let pwd = password.value;
  try {
    loading.value = true;
    const res = await lockStore.unLock(pwd);
    errMsg.value = !res;
  } finally {
    loading.value = false;
  }
}

关注专栏

如果本文对您有所帮助请关注➕、 点赞👍、 收藏⭐！您的认可就是对我的最大支持！

此文章已收录到专栏中 👇，可以直接关注。