About the implementation idea of ​​adding lock screen function in Vue project

This article mainly introduces the implementation ideas of adding lock screen function in Vue project. This article introduces you to you in very detail and has certain reference value. Friends who need it can refer to it

1. Implementation ideas

(1) Set the lock screen password
(2) Store the password in localStorage (this project has encapsulated h5’s sessionStorage and localStorage)
( 3) vuex sets SET_LOCK state.isLock = true (true is the lock screen state)
(4) Determine isLock in vuex in the routing (true lock screen state does not allow the user to return to the url and modify the url jump page Otherwise, it is OK)

(1) Set the lock screen password

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

(2) Password storage localStorage setStore is a self-encapsulated method

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

( 3 ) vuex sets SET_LOCK state.isLock = true and exists in the store at the same time

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

(4) Determine isLock in vuex in routing

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

The above is the entire content of this article, I hope it will be helpful to everyone's learning, more related content Please pay attention to PHP Chinese website!

Related recommendations:

How to use vue to quickly develop app scaffolding tools

How to use mock in the vue-cli project data

The above is the detailed content of About the implementation idea of ​​adding lock screen function in Vue project. For more information, please follow other related articles on the PHP Chinese website!