Vue 프로젝트에 잠금 화면 기능을 추가하는 구현 아이디어에 대해

이 글은 Vue 프로젝트에 잠금 화면 기능을 추가하는 구현 아이디어를 주로 소개하고 있으며, 필요한 친구들이 참고할 수 있습니다

1. (1) 잠금 화면 비밀번호 설정(2) 비밀번호는 localStorage에 저장됩니다(이 프로젝트는 h5의 sessionStorage 및 localStorage를 캡슐화했습니다)

(3) vuex는 SET_LOCK state.isLock = true를 설정합니다(true는 잠금 화면 상태입니다)

(4) 라우팅의 vuex에서 isLock을 결정합니다(잠금 화면 상태가 true이면 사용자는 URL로 돌아갈 수 없으며 페이지로 이동하기 위해 URL을 수정할 수 없습니다. 그렇지 않으면 괜찮습니다)

(1) 잠금 설정 화면 비밀번호

 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는 SET_LOCK state.isLock = true를 설정하고 스토어에 존재합니다

 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()

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

관련 권장 사항:

vue를 사용하여 앱 스캐폴딩 도구를 빠르게 개발하는 방법

vue-cli 프로젝트에서 모의 ​​데이터를 사용하는 방법

위 내용은 Vue 프로젝트에 잠금 화면 기능을 추가하는 구현 아이디어에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!