À propos de l'idée d'implémentation consistant à ajouter une fonction d'écran de verrouillage dans le projet Vue

Cet article présente principalement les idées d'implémentation de l'ajout de la fonction d'écran de verrouillage dans le projet Vue. Cet article vous présente en détail et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

1. Idées de mise en œuvre

( 2) Stocker le mot de passe dans localStorage (ce projet a encapsulé la sessionStorage et localStorage de h5)
( 3) vuex définit SET_LOCK state.isLock = true (true signifie l'état de l'écran de verrouillage)
(4) Déterminez isLock dans vuex dans le routage (le véritable état de l'écran de verrouillage ne permet pas aux utilisateurs de revenir à l'URL et de modifier l'URL pour y accéder la page Sinon, c'est OK)

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

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

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

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

Comment utiliser vue pour développer rapidement des outils d'échafaudage d'applications

Comment utiliser mock in vue- Données du projet cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!