Über die Implementierungsidee des Hinzufügens einer Sperrbildschirmfunktion im Vue-Projekt

In diesem Artikel werden hauptsächlich die Implementierungsideen zum Hinzufügen einer Sperrbildschirmfunktion im Vue-Projekt vorgestellt. Dieser Artikel stellt Sie ausführlich vor und hat einen gewissen Referenzwert.

1. Implementierungsideen

( 1) Legen Sie das Sperrbildschirm-Passwort fest
( 2) Speichern Sie das Passwort in localStorage (dieses Projekt hat sessionStorage und localStorage von h5 gekapselt)
( 3) vuex setzt SET_LOCK state.isLock = true (true bedeutet Sperrbildschirmstatus)
(4) Bestimmen Sie isLock in vuex im Routing (wahrer Sperrbildschirmstatus ermöglicht es Benutzern nicht, zur URL zurückzukehren und die URL zu ändern, zu der gesprungen werden soll die Seite Ansonsten ist es in Ordnung)

(1) Legen Sie das Sperrbildschirm-Passwort fest

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

(2) Passwortspeicher localStorage setStore ist ein selbstverkapselte Methode

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

( 3) vuex setzt SET_LOCK state.isLock = true und existiert gleichzeitig im Store

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

(4) Bestimmen Sie isLock in vuex im Routing

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle beim Lernen hilfreich ist. Weitere verwandte Inhalte. Bitte beachten Sie die chinesische PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie Vue, um schnell App-Scaffolding-Tools zu entwickeln

So verwenden Sie Mock in Vue- CLI-Projektdaten

Das obige ist der detaillierte Inhalt vonÜber die Implementierungsidee des Hinzufügens einer Sperrbildschirmfunktion im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!