房产中介管理软件第11课：锁屏页面制作

用户暂离的时候可以点击锁屏按钮，进入锁屏界面，输入密码后进行解锁。

一般锁屏有两种实现方法，

一种是弹出一个覆盖层，覆盖层显示解锁框，好处是界面流畅，解锁后能完全保留解锁前界面的菜单、Tabs、输入等。缺点是如果浏览器打开的话，可以通过console删除相关弹层继续使用系统。

另一种是路由跳转，相当于跳转到了一个新界面，好处是安全性会好点，即使手工修改路由地址或者点后退按钮也不会显示界面内容。缺点是解锁后跳转原页面，设置等无法保留，需要进行手工进行设置的保存和读取。

一、新增锁定按钮，点击后跳转到锁屏界面，并把锁屏设置保存到localStorage

//锁屏
const handleLockScreen = () => {
  store.dispatch('userinfo/lockscreen', '1').then(() => {
    proxy.$router.push({ path: '/Lock' })
  })
}

//锁屏
lockscreen({ commit }: { commit: any }, islock: string) {
  // 设置用户及登录信息
  commit('setLockScreen', islock)
},

setLockScreen(state: IState, islock: string) {
  state.lockscreen = islock
  localStorage.setItem(process.env.VUE_APP_CACHE_LOCKSCREEN_KEY || "lockscreen", islock)
},
removeLockScreen(state: IState, islock: string) {
  state.lockscreen = undefined
  localStorage.removeItem(process.env.VUE_APP_CACHE_LOCKSCREEN_KEY || "lockscreen")
}

二、弹出锁屏画面，注意路由地址发生了变动

输入密码后可以进行校验，密码正确才会进行解锁

//解锁
  const handleLogin = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
      if (valid) {
        store.dispatch('userinfo/unlockscreen', loginForm.LoginPass).then(() => {
          //设置按钮loading
          loading.value = false
          //路由跳转
          proxy.$router.go(-1)
        }).catch(() => {
          loading.value = false
        });
        return false;
      } else {
        return false
      }
    })
  }
  //退出
  const handleLogout = async () => {
    store.dispatch('userinfo/logout').then(() => {
      proxy.$router.replace({ path: '/Login' })
    })
  }

// 用户解锁屏幕操作
  unlockscreen({ commit }: { commit: any }, loginpass: string) {
    return new Promise<void>((resolve, reject) => {
      // 加载数据
      httpPost(this, '解锁', API.UNLOCK, { LoginPass: loginpass }).then(res => {
        if (res === undefined) { return; }
        if (res.data.code != 2000) { return; }

        // 设置用户及登录信息
        commit('removeLockScreen')

        resolve();
      }).catch(error => {
        reject(error)
      })
    })
  },

三、为了防止用户手工修改路由地址，还需要在路由拦截器里做设置

// 定义不校验的白名单
const whiteList = ['/Login']

// 路由处理
router.beforeEach((to, from, next) => {
  const userinfo = store.getters['userinfo/getUserInfo'];
  const islock = store.getters['userinfo/getIsLock'];

  //console.log(islock);

  if (!userinfo) {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/Login')
    }
  } else {
    if (islock && islock === '1' && to.path !== '/Lock' && to.path !== '/Login') {
      next('/Lock')
    } else {
      next();
    }
  }
})

（本文完）