こんにちは。
自社でウェブサービスを開発することになりました。
まだ開発中ですので、どのようなことをするのか具体的には書けないのですが、 出せる範囲でこちらに書いていきたいと思います。
システムの組み合わせ
フロントエンドに Nuxt.js バックエンドは Node.js で API という組み合わせです。
ユーザー別の処理やウェブコンテンツ提供の処理を行うために、APIはアクセストークンによる認証という方式を採用することにしました。
サーバーサイドでのAPI通信とクライアントサイドでのAPI通信の区別
それ自体は universal モードで動作させる予定ですが、APIとの接続にはユーザー個別の処理や会員向けの情報をやりとりするために、工夫が必要です。
会員ログインする前の情報は asyncData() にAPI通信の処理を書き、サーバー側でAPI通信してデータを取得する形ですね。 データの管理を Vuex store とするなら fetch() でやる感じですね。
async asyncData() { let categories = []; const res = await axios.get(/* APIのエンドポイント */); /* res.data の中身を処理する */ const data = { }; return data; },
一方、会員向けのAPI処理は誰からのリクエストなのか?を区別する必要がありますので、ログイン認証時に払い出されたアクセストークンを API のリクエスト時に付与する、といった実装が必要です。
アクセストークンの保持はくアイアント側の処理で行われますので、 API通信の処理を plugin として実装し、クライアントサイドで動作するように next.config.js に設定します。
plugins: [ { src: '~plugins/API通信するプラグイン', ssr: false }, ],
あとはここのページやコンポートンとからそれらの処理を呼び出すイメージです。 ↓ページ読み込みの際にAPI通信するように mounted() に実装する場合の例です。
mounted: async function() { try { const res = await API通信するプラグインの処理を呼び出す(); /* res.data の中身を処理する */ } catch (e) { // エラー時の処理 // 必要に応じてログアウト処理など・・・ } },
処理がサーバーサイドで行われるのか、クライアントサイドで行われるのか、意識が必要ですが、 慣れれば同じような形で実装を進めていけるかなと思います。
宜しくお願い致します。