Vueプロジェクトにおけるロック画面機能追加の実装アイデアについて

この記事では主に Vue プロジェクトにロック画面機能を追加する実装アイデアを紹介します。必要な友人は参考にしてください

1. (1) ロック画面のパスワードを設定します(2) パスワードは localStorage に保存されます (このプロジェクトは h5 の sessionStorage と localStorage をカプセル化しています)(3) vuex は SET_LOCK state.isLock = true を設定します (true はロック画面の状態です)

(4) ルーティングの vuex で isLock を決定します (ロック画面の状態が true の場合、ユーザーは URL に戻って URL を変更してページにジャンプすることはできません。それ以外の場合は OK)

(1) ロックを設定する画面パスワード

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

(2) パスワードストレージ localStorage setStore は自己カプセル化されたメソッドです

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

(3) vuex は SET_LOCK state.isLock = true を設定し、ストアに存在します

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

(4) ルーティングの vuex で isLock を判断する

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

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHPの中国語サイトです！

関連する推奨事項:

vue を使用してアプリ スキャフォールディング ツールを迅速に開発する方法

vue-cli プロジェクトでモック データを使用する方法

以上がVueプロジェクトにおけるロック画面機能追加の実装アイデアについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。