怎么在Vue項(xiàng)目中添加一個(gè)鎖屏功能

這篇文章將為大家詳細(xì)講解有關(guān)怎么在Vue項(xiàng)目中添加一個(gè)鎖屏功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

1. 實(shí)現(xiàn)思路

( 1 ) 設(shè)置鎖屏密碼
( 2 ) 密碼存localStorage （本項(xiàng)目已經(jīng)封裝h6的sessionStorage和localStorage）
( 3 ) vuex設(shè)置 SET_LOCK state.isLock = true (為true是鎖屏狀態(tài))
( 4 ) 在路由里面判斷vuex里面的isLock（為true鎖屏狀態(tài)不能讓用戶后退url和自行修改url跳轉(zhuǎn)頁(yè)面否則可以）

（1）設(shè)置鎖屏密碼

 handleSetLock() {
  this.$refs['form'].validate(valid => {
  if (valid) {
   this.$store.commit('SET_LOCK_PASSWD', this.form.passwd)
   this.handleLock()
  }
  })
 },

（ 2 ) 密碼存localStorage setStore是自己封裝的方法

 SET_LOCK_PASSWD: (state, lockPasswd) => {
  state.lockPasswd = lockPasswd
  setStore({
  name: 'lockPasswd',
  content: state.lockPasswd,
  type: 'session'
  })
 },

( 3 ) vuex設(shè)置 SET_LOCK state.isLock = true 同時(shí)存在store里面

 SET_LOCK: (state, action) => {
  state.isLock = true
  setStore({
  name: 'isLock',
  content: state.isLock,
  type: 'session'
  })
 },

( 4 ) 在路由里面判斷vuex里面的isLock

 if (store.getters.isLock && to.path !== lockPage) {
  next({
  path: lockPage
  })
  NProgress.done()

關(guān)于怎么在Vue項(xiàng)目中添加一個(gè)鎖屏功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。