web-dev-qa-db-ja.com

Webページを更新するとVuexストアが空になる

webページを更新した場合にストアを維持する方法

    let store = new Vuex.Store( {
    modules: {
        demo, auth
    },
    strict: true
} );


let router = new VueRouter( {
    mode: 'history',
    saveScrollPosition: true,
    routes: routes
} )

履歴モードを使用していますが、Webページをリロードすると、ストアが空になります。解決策はありますか？

vue.jsvue-routervuex
8
Seb

アプリの更新後に状態データを保持するには、localStorageまたはsessionStorageを使用できます。

  1. XSS：トークンをlocalStorageに保存する際の問題は、アプリがXSS（クロスサイトスクリプティング）攻撃に対して脆弱であることです。それは別として、それは非常に安全です。 localStorageはドメインにバインドされているため、Cookieとは異なり、ブラウザーを閉じた後でもwww.yourapp.comのデータはそのまま残ります。リクエストを行ったサイトを管理する必要はありません。同じドメインのブラウザのすべてのタブは、localStorageのデータを使用できます

    上記の動作が必要ない場合は、sessionStorageを使用できます。動作はほぼ同じですが、ブラウザーを閉じるとデータが消去されます。

  2. Cookieを取得する場合は、XSSによって奪われるトークンの保存に役立つことを確認してください。ただし、CSRF（Cross Site Request Forgery）攻撃から保護するために、csrf-tokenも提供する必要があります。

    今後Cookieを使用する予定がある場合は、ヘッダーのhttpOnlyフラグがtrueに設定されていることを確認してください。

全体的に見て、localStorageは、トークンやその他のアプリデータを維持するための非常に一般的に推奨されるソリューションであることがわかりました。

参考のために、この回答にソースを追加します。

  1. ステートレス（=セッションレス）認証を使用する場合に必要なCSRFトークン？ 受け入れられた回答なども確認してください。

  2. https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet

  3. https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

  4. https://www.whitehatsec.com/blog/web-storage-security/ これにより、localStorageの使用に関する落とし穴とハウツーがわかります。

6
Amresh Venugopal

  1. ページを更新すると（F5）アプリを再実行しているので、データでストアを初期化しない限り、アプリの起動時と同じように空になります。

  2. この場合に保持する状態を決定し、それらをCookie/LocalStorageに保存してから、app.jsそれらをcookie/LocalStorageからストアにロードします。ページが更新された場合にユーザーをログインさせておきたいので、認証トークンなどの一般的な方法です。トークンの保存に関するStormpathからのいい投稿： https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

  3. ルート間を移動しているときにVuexストアとアプリ全体がリロードされている場合-アプリケーションに問題があり、VueRouterナビゲーションを適切に使用していない可能性があります。

1
M U

状態をsessionStorageにキャッシュできます。これは、ページ（タブ）の更新イベントが発生しても存続しますが、ページまたはブラウザーが閉じられると消去されます。

sessionStorageに関するドキュメント

0
euvl