プラスプラス開発者ブログ

岩手県盛岡市のシステム開発会社「株式会社プラスプラス」の開発者ブログです。

Nuxt.js でウェブサービスを開発する

こんにちは。

自社でウェブサービスを開発することになりました。

まだ開発中ですので、どのようなことをするのか具体的には書けないのですが、 出せる範囲でこちらに書いていきたいと思います。

システムの組み合わせ

フロントエンドに 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) {
            // エラー時の処理
            
            // 必要に応じてログアウト処理など・・・
            
        }
    },

処理がサーバーサイドで行われるのか、クライアントサイドで行われるのか、意識が必要ですが、 慣れれば同じような形で実装を進めていけるかなと思います。

宜しくお願い致します。

Looking Glass でアプリを動かす!!

今月はもう無理っすの「軽く熊」です。
裏でまた新規デイバス対応作業してました…。

今回は裸眼立体視ディスプレイ「Looking Glass」なる
面白いデバイスに触れましたが、こういうものは
一体どんな人が思いつくんでしょうね…次元が違います。

続きを読む