À 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

( 1) Définir le mot de passe de l'écran de verrouillage

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

(1) Définir le mot de passe de l'écran de verrouillage

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

(2) Stockage du mot de passe localStorage setStore est une méthode auto-encapsulée

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

(3) vuex définit SET_LOCK state.isLock = true et existe également dans le magasin

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

(4) Déterminer isLock dans vuex dans le routage

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

Ce qui précède est l'intégralité contenu de cet article, j'espère qu'il sera utile à tout le monde. Utile, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

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!