Nuxt.js User Agent情報を全ページに使える定数化した件

背景

最近自社アプリから自社サービスにアクセスする際に画面のレイアウトや画像を出し分けする要件を対応しました。
要件をざっくり説明します。

1. 自社アプリからアクセスするとUser Agentには特定な文字列が含まれていて、それでアプリのアクセスかどうか判定する。
2. 判定の結果を全ページに使えるようにしたい。

全ページに使いたいので、今回は判定結果をinjectメソッドで共通に使える定数にしてます。

次にどこで判定処理を書くのか？SSRでもCSRでも実行されるpluginで良いんじゃないかなと思ったのでpluginを採用しました。

実装方法

1. pluginフォルダーにファイルを追加、今回はuser-agent-config.jsにしました。
2. ソースコードは下記です

export default function (context, inject) {
  // サーバーとクライアント両方からのアクセスあるので、
  // サーバーはheadersから、クライアントはnavigatorから情報を取得
  const userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent;
  
  // ユーザーエージェントの情報がmyappが含めたら自社アプリからのアクセスということで、trueになります
  const isApp =
    userAgent.includes('myapp');
  
  // 全ページで使える共通プロパティとしてinjectする
  // vueファイルでは$isAppでアクセスできます。
  inject('isApp', isApp);
}

3. nuxtjs.config.jsでpluginを登録

plugins: [
    '~/plugins/user-agent-config',
  ],

4. vueでinjectされたプロパティをアクセスする

// vueファイルではこんな感じに使えます

<template v-if="$isIOSApp">
   <p>APPからのアクセスです</p>
</template>
<template v-else>
  <p>APP以外からのアクセスです</p>
</template>

最後に

pluginとinjectのあわせ技で簡単に使いたい変数を共通化できますね、便利ですがnuxtjsのライフサイクルを理解しておいたほうが良さそうです。いつどのタイミングでpluginが呼び出されるのかここで参考できます。

最後まで見てくださってありがとうございました。
それではまた。