Nuxt.모든 페이지에서 js User Agent 정보를 상수화하는 이벤트

배경.

최근에는 본사의 응용 프로그램에서 본사 서비스에 접근할 때 화면의 레이아웃과 이미지를 나누는 필수 조건에 대응했다.
나는 대체로 조건을 설명해 주겠다.

회사의 애플리케이션에서 액세스할 때 User Agent는 특정 문자열을 포함하여 애플리케이션에 대한 액세스 여부를 결정합니다.

모든 페이지에서 판결의 결과를 사용하기를 희망합니다.

모든 페이지에서 사용하려고 했기 때문에 이번 판정 결과는inject 메서드 통용되는 상수였다.
다음은 판정 처리를 어디에 쓰나요?SSR과 CSR 모두 수행할 수 있는 플러그인이 좋지 않나 싶어 플러그인을 적용했습니다.

설치 방법

plugen 폴더에 파일을 추가합니다. 이번은user-agent-config입니다.결정했어

소스 코드는 다음과 같다

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);
}

nuxtjs.config.js에plugen

등록

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

vue inject의 속성에 접근

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

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

최후

pluggin과 inject의 결합 기술에서 간단하게 사용하고 싶은 변수를 공통화할 수 있어 편리하지만nuxtjs의 생명주기를 이해하는 것이 좋다.언제 어느 타이밍에 Plugon을 호출할까요? 여기 참고할 수 있습니다.
끝까지 봐주셔서 감사합니다.
그럼 안녕히 계세요.