Vue はユーザーのログイン状態を維持します (さまざまなトークン保存方法)

フロントエンドでは、ユーザーのログイン状態を維持する方法がたくさんあります。Cookie、セッション、トークンなどの情報を保存することで維持できます。バックグラウンドがフロントエンドに送信するものがどれであっても、私たちがしなければならないことは、この情報をローカルブラウザに保存することです。ブラウザがリクエストを再度送信すると、'key' = 'value' が設定された Cookie が再度サーバーにスローされます。サーバーは、 Cookie的フィールドを通じてユーザーがログインしたかどうかを判断し、必要に応じてユーザーリクエストを処理します。そうでない場合は、400 を返して、ユーザーに最初にログインするように促します。以前にも関連記事を共有しました：Django：Cookie 設定とクロスドメインの問題の処理、Django：セッション付き Cookie、Django：トークンベースの認証。フロントエンドとして、これらの値を保存する方法も多数あります。Cookie、LocalStorage、SessionStorage、または Vuex 状態マネージャーに保存できます。もちろん、それらの機能も異なります。たとえば、Vue: LocalStorage と SessionStorage の違いと使用方法などです。

クッキーの設定方法

Django はHttpResponse來を通じてオブジェクトの set_cookie に応答しset_cookie，設置好對應的視圖和路由，只要通過瀏覽器訪問該路由，瀏覽器就會自動獲取到set_cookie值并存入到本地（當瀏覽器正在運行時通常都存在內存中，當瀏覽器關閉時通常會存入硬盤中）。

クッキーのデメリット:

1. クッキーの保存量が少ない。2. クッキーの保存数が限られている。3. ネットワークの負荷が増加する。4. セキュリティ上のリスクがある。

LocalStorage と SessionStorage トークンストレージ

SessionStorage に保存する場合、ユーザーがログインするときに、ユーザー名 ID とトークンを sessionStorage に保存する必要があります。これは、Vue で実装することも簡単で、sessionStorage.setItem または sessionStorage['token'] を通じて実現できます。

.then(res => {
                    res.data['code']==200の場合{
                        ローカルストレージをクリアする()
                        ローカルストレージ.setItem('情報',1)
                        ローカルストレージ['フラグ']=1
                        // localStorage.setItem('フラグ',1)
                        セッションストレージをクリアする()
                        // sessionStorage['userid'] = JSON.stringify(res.data.userInfo.id)
                        sessionStorage.setItem('userid',JSON.stringify(res.data.userInfo.id))
                        sessionStorage['token'] = JSON.stringify(res.data.token)
                        this.$メッセージ({
                            メッセージ:「ログインに成功しました」
                            タイプ: '成功'
                        })
                        this.$router.push('/home')
                    }それ以外{
                        this.$メッセージ({
                            メッセージ:「ユーザー名またはパスワードが間違っています」
                            タイプ: '警告'
                        })
                        }
                })

このように、ブラウザの開発者ツールでアプリケーション内の Session Storge を見つけて確認することができます。先ほど取得した値はそこに保存されています。LocalStorage に保存するか SessionStorage に保存するかは、プロジェクトの要件によって異なります。

LocalStorage と SessionStorage の主な違いは次のとおりです。

LocalStorage は、ユーザーが積極的に削除しない限り、ブラウザに永続的に保存されます。

SessionStorage は現在のウィンドウが閉じられる前のみ有効であり、ウィンドウが閉じられると保存されたデータは自動的にクリアされます。

Vuex ストアトークン

ストアファイルの状態でトークンを初期化します。状態内のデータは直接変更をサポートしていないため、setToken（トークンの設定）とgetToken（トークンの取得）というメソッドを定義する必要があります。その後、ログインインターフェースでthis.$store.commit('setToken',JSON.stringify(res.data.token))を導入し、バックグラウンドから送信されたトークンをVuexとlocalStorageに保存することができます。なぜlocalStorageに保存する必要があるのでしょうか？ページが更新されると、Vuexの状態は存在しなくなります。現在の状態を維持するためには、localStorageから状態を抽出し、その値をVuexに渡す必要があります。

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします
 
Vue.use(Vuex)
 
デフォルトの新しいVuex.Storeをエクスポートします({
  州： {
    token:'' // トークンを初期化する
  },
  突然変異:
    //トークンメソッドを保存する //トークンを外部から渡された値に設定する setToken(state, token) {
        state.token = トークン
        localStorage.token = token //トークンを同期的にlocalStorageに保存する
      },
  },
 ゲッター: {
  //トークン取得メソッド//トークンがあるかどうかを判断します。ない場合は再割り当てしてトークンを状態に戻します
  getToken(状態) {
    if (!state.token) {
      state.token = localStorage.getItem('token')
    }
    state.tokenを返す
    }
  },
  アクション: {
 
  }
})

Vuex を使用する理由

Vuex はストレージツールではなく、状態管理ツールです。なぜトークンが Vuex に保存されるのでしょうか? Vuex にカプセル化された localStorage 操作は、localStorage を直接使用してデータを操作できますが、データの変更を監視することはできません。 Vuex は、データの状態の変化を監視できるグローバル ストレージです。Vuex の値が変化すると、データの変化を応答的に監視できます。

これで、Vue でユーザーのログイン状態を維持する方法 (さまざまなトークンの保存方法) に関する記事は終了です。Vue でユーザーのログイン状態を維持する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。