> 웹 프론트엔드 > JS 튜토리얼 > Vue 프로젝트에 잠금 화면 기능을 추가하는 구현 아이디어에 대해

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

不言
풀어 주다: 2018-06-30 16:30:23
원래의
1778명이 탐색했습니다.

이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿