ホームページ > ウェブフロントエンド > jsチュートリアル > Vueプロジェクトにおけるロック画面機能追加の実装アイデアについて

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

不言
リリース: 2018-06-30 16:30:23
オリジナル
1777 人が閲覧しました

この記事では主に 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート