캐모마일 Core 모듈 사용법 및 가이드

개요

ChmmCore는 Nuxt 환경에서의 useFetch, Auth, i18n(다국어) 관련 기능을 종합한 라이브러리입니다.

주요 특징

1. useFetch

   • Server Side Rendering 지원

   • Client Side Rendering 지원

2. Auth

   • Jwt Token 정보 저장소

   • 메뉴 및 컴포넌트 Permission 정보 저장소

   • Auth Middleware

3. i18n

   • i18n 플러그인 설정 지원

   • useFetch의 에러 메세지 다국어 지원

사용법

1. 설치

   • repository 설정

   // .npmrc 파일 registry=http://10.131.7.138:9090/repository/npm-public/

   • 라이브러리 추가

   npm i @chmm/core --save-dev

   2. 설정

      • .env 설정

      // base API URL NUXT_PUBLIC_API_BASE=http://localhost:23636 // custom Fetch 사용여부 USE_CHMMFETCH=true // auth 기능 사용여부 USE_CHMMAUTH=true // i18n 기능 사용여부 USE_CHMMI18N=true // refresh 버튼 사용여부 INFO_REFRESH=true // sessionStorage 사용여부, false 인 경우 localStorage 사용 SESSION=false // Token 만료 체크 시간 (예) 360000 => 만료 6분전 체크) CHECK_TIME=360000 // Authentication 체크가 필요없는 API 리스트 NO_AUTH_API=security/jwt/authenticate,chmm/user/update-password,rsa/public-key,security/jwt/refresh-token // API 호출시 Refresh Token 사용여부 AUTO_REFRESH_TOKEN=true

      • nuxt.config.ts 설정

      // nuxt.config.ts 파일 export default defineNuxtConfig({ ... modules: ['@pinia/nuxt', '@chmm/core'], ... runtimeConfig: { // Private keys are only available on the server // Public keys that are exposed to the client public: { apiBase: '', useChmmFetch: process.env.USE_CHMMFETCH, useChmmAuth: process.env.USE_CHMMAUTH, useChmmI18n: process.env.USE_CHMMI18N, infoRefresh: process.env.INFO_REFRESH, session: process.env.SESSION, checkTime: process.env.CHECK_TIME, noAuthAPi: process.env.NO_AUTH_API, autoRefreshToken: process.env.AUTO_REFRESH_TOKEN, loginPage: '/admin/Login', // 로그인 페이지 url (token 만료 시, 이동 페이지) ... }, }, ...

2. 사용

   // useFetch는 4가지 옵션을 제공 (useGetFetch, usePostFetch, usePutFetch, useDeleteFetch) // useGetFetch 예 const { data, pending, error } = await useGetFetch( `/chmm/common-code/category/list`, categoryVo, ) // usePostFetch 예 const { data, pending, error } = await usePostFetch( `/chmm/common-code/category/delete`, selectedCategory, ) // Auth Store 사용 예 const { authenticateUser, logUserOut, getTokenValidTime, checkTokenTimeout, renewRefreshToken } = useAuthStore() // use auth store // 로그인 await authenticateUser({ username: id.value, password: encRSA(password.value, config.public.rsaPublicKey), }) // 로그아웃 logUserOut() // 토큰 시간 확인 getTokenValidTime() // 토큰 만료 시간 체크 및 갱신 checkTokenTimeout() // Token 갱신 renewRefreshToken() // I18n 사용 예 <template> <InputText v-model="appVO.searchAppId" :placeholder="i18n.t('grid.column.appId')" @keyup.enter="search" /> </template> <script setup> const i18n = useI18n() // i18n에 다국어 메세지 저장 i18n.setLocaleMessage("ko", {"alert.msg.copy.success": '복사되었습니다."}) i18n.setLocaleMessage("en", {"alert.msg.copy.success": 'It is copyed."}) // locale(default: ko)에 해당하는 다국어 메세지 변환 alert(i18n.t("alert.msg.copy.success")) // 복사되었습니다. // i18n locale 변경 i18n.locale = "en" // locale(en)에 해당하는 다국어 메세지 변환 alert(i18n.t("alert.msg.copy.success")) // It is copyed. </script>