Ideas for adding lock screen function to Vue project

1. Implementation ideas

(1) Set the lock screen password
(2) Password stored localStorage (This project has already encapsulated the sessionStorage and localStorage of h5)
(3) vuex settings SET_LOCK = true (true is the lock screen state)
(4) In the route, determine the isLock in vuex (the lock screen status is true, the user cannot back the URL and modify the URL to jump to the page by itself, otherwise it is OK)

(1) Set the lock screen password

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

(2) Password storage localStorage setStore is a method of encapsulation by itself

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

(3) vuex setting SET_LOCK = true exists in the store

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

(4) Judgment the isLock in vuex in the route

 if ( &&  !== lockPage) {
  next({
  path: lockPage
  })
  ()

Source code address

Summarize

The above is the idea of ​​adding the lock screen function to the Vue project that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!