nuxtの状態管理はvuexに統一してsessionは使わないほうがいいでしょうか？

nuxtでユーザー認証をするアプリケーションを書いているのですが状態管理の設計をどうするか迷っています。

vuexでまとめて状態管理をしたほうが設計的にはきれいだと思うのですがその場合はpagesをまたぐとうまく渡せない気がするのでlayoutsのdefault.vueに記述する形で解決するのでしょうか？

user_idなどログイン情報の状態管理をnuxtで皆さんがどうやっているのか知りたいです。

行動規範の内容に同意します

回答1件

公式サイトの該当部分は読みましたか?

あとは、Qiitaの記事など、「nuxt」「auth / 認証」「ログイン」などで検索するとだいたいみなさん同じようなやりかたで実装しているのがわかると思います。

ログインページに認証機能を実装し、認証に成功したらVuexにユーザー情報を格納し、middlewareでページを移動するタイミングでVuexにユーザー情報があるか(初期値をnullなどにしておく)をチェックするのが基本的な流れです。

追記(2018/11/25)

Nuxt.jsがどう動くかは、公式サイトに記載があります。
通常のVue.jsアプリケーションとの違いは、以下の通りです。

通常のVue.jsアプリケーション
index.html(ビルド済みのJSファイルがリンクしている)を返して、ブラウザでJavaScriptが実行され、該当のページ(コンポーネント)が表示される。検索bot等からはページがひとつのように見える。

Nuxt.jsを使用した場合
サーバへのリクエストに基づいて、該当のページ(コンポーネント)のHTML(ビルド済みのJSファイルがリンクしている)を返して、ブラウザでSPAとして動作する。検索bot等からは各ページがあるように見える。

つまり、極論「ブラウザでSPAとして動作する前に、サーバ側でもろもろ状態(State)の初期化と必要なページのレンダリングができるよ」というだけで、一度ブラウザに移った後は(Nuxt.js特有の処理はありますが)普通のSPAです。
Nuxt.jsのドキュメントを読んだとき「クライアントだけで呼ばれる」「サーバだけで呼ばれる」「両方で呼ばれる(から、バグらないようにどちらかだけになるよう分岐する)」などの説明があることがありますが、上記が理由です。

ブラウザで動くSPAでは、ユーザー情報はVuexで管理すればOKです。
ただ、「一度サイトを離脱するなどしても、ログイン状態を維持していたい」などの仕様があれば、
別途セッションの管理が必要(ログイン成功したら、そのタイミングでクッキーを設定する等)です。
Firebaseを使っているのであれば、セッション管理の機能があります。調べてみてください。

回答になっていれば幸いです。

投稿2018/11/25 01:47

編集2018/11/26 13:52