NuxtのSPAモードでの認証処理(1)

最近のプロジェクトではNuxtを使用していますが、プロジェクトの迅速なオンライン化が必要であることを考慮して、SSRを放棄し、直接単ページSPAモードで開発を行いました.
鑑権という研究とまとめは、公式に鑑権の例がServer端に基づいているので、Client端の鑑権まとめを書きました.
文章は多くの篇に分けて、次第に改善して更新して、辛抱強く待ってください...
予備知識

VueとVuex

Document.cookie

HTTPの基本的性質

Window.計画とウィンドウsessionStorage

紹介する
Nuxt.jsはVueベースである.jsの汎用アプリケーションフレームワーク.では、Vueベースである以上、自然にVuexも使用されます.これはステータス管理モードですが、データ共有のソリューションとして使用する場合がありますが、ページのリフレッシュ時に失われる問題があります.
そのため、Vueプロジェクトの開発では、リフレッシュするたびにデータを取得する方法は2つしかありません.

リフレッシュのたびにサーバに要求が送信され、データが取得すると、ページに対してビュー

が再更新される.

操作毎に本クライアントのCookieまたはStorageの

が存在する.
一般的には、取得する必要があるデータが頻繁に変化しない限り、第1の方法はサーバリソースに浪費をもたらすことは明らかである.以下、第2案についてまとめる.
需要分析
HTTPが無状態であることはよく知られているが、ユーザがページにアクセスするたびにセッションを保持できるように、クッキーやstorageで記録する必要がある.私たちのバックグラウンドのセッションの有効期間は30分です.
この30分以内に、ユーザがログイン状態にあり、ローカルにも有効な証明書が保存されている場合、サーバが毎回検証することなく、そのユーザの有効なリソース要求を実行することができる~
デマンド側は、ローカルに格納されている証明書がセッションが閉じた後に消去されることを望んでいるため、localStorageをまず排除し、CookieとsessionStorageを使用することを考慮します.また本人は怠け者で、Cookieの操作が面倒なので、sessionStorageを使うことにした.(最後にプラグインも使いましたが…)
ベースインスタンス
VuexグローバルdataをsessionStorageで格納する方法で表示
Nuxtアプリケーションの作成
私たちはNuxtのStarterのCliに基づいて簡単なNuxtアプリケーションを構築し、コマンドは以下の通りです.

vue init nuxt-community/starter-template nuxt-spa-demo
cd nuxt-spa-demo
npm i

モードをSPAモードに変更
修正修正修正nuxt.config.js、追加mode: 'spa',、大体以下の通りです.

module.exports = {
  mode: 'spa',
  head: {
    ...
  }
  ...
}

Vuex基本コンテンツの作成
次に、storeディレクトリにindex.jsが作成され、コードは次のとおりです.

export const state = () => ({
  counter: window.sessionStorage.getItem('counter') || 0
})

export const mutations = {
  increment: state => {
    state.counter++
    window.sessionStorage.setItem('counter', state.counter)
  },
  decrement: state => {
    state.counter--
    window.sessionStorage.setItem('counter', state.counter)
  }
}

では、VuexのMutatationsでは、毎回セッションストアを同時に操作する.
また、ページのロード時にsessionStorageにcounterという変数があるかどうかを確認し、ない場合はデフォルト値0を設定します.
操作可能なVuexのインタフェースを作成する
次に、デフォルトのホームページpage/index.vueを変更し、コードはほぼ次のようになります.

import AppLogo from '~/components/AppLogo.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    AppLogo
  },
  computed: {
    ...mapState(['counter'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement'])
  }
}

アプリケーションとテストの実行
基本的な変更が完了すると、大まかな効果でブランチnuxt-auth-aが表示され、適用が実行されます.

npm run dev

http://localhost:3000を開く、+または-をクリックし、数字が変化すると、ページがリフレッシュされ、0に戻らないことが観察できる、簡単な例が完成する.
注意しなければならないのは

sessionStorageのデータは、同じサイトアドレスの複数のウィンドウで共有されません.つまり、接続するたびに新しい

になります.

sessionStorageに格納されているデータは、現在のラベルを閉じて再オープンすると、データは空になりますが、新しいリクエストではない場合は、たとえば_前回閉じたラベルを取り消します(Ctrl+Shift+T)_このような操作で、彼の前のデータは

を維持しています.
まとめ
実际には、最も简単なsessionStorageベースのデータを格納例は、コードは多くありませんが、复雑なプロジェクトアプリケーションで使用すると、このような処理方法が悪いかもしれません.例えば、需要変更による调整など、プラグインを借りるのは良い选択です.今回紹介した内容は比較的簡単で、後でNuxtの鑑権の過程の思考を徐々に改善する.
私も勉强しながら実践して総括して、文の中で间违いがあればまた多く指摘してください.