[Node.js] Vue.js quasar에서 qs 설치 및 사용 방법

qs 사용 방법

qs 설치

# node v12 필요
npm install qs

 

.vue 파일 수정

Vue.js로 만든 quasar 클라이언트에서 qs 모듈을 사용하는 방법

 

LoginGroupware.vue

<template>
  <q-page class="q-pa-lg">
    <h5 class="q-mt-sm q-mb-md q-pl-lg">그룹웨어 로그인</h5>
  </q-page>
</template>

<script>
import qs from "qs";

export default {
    data() {
        return {
            authTokenURL: "https://hydra.trustbloc.local/oauth2/token",
            basicURL: "https://user.trustbloc.local/employID/",
            loginType: "LoginGroupware",
            clientId: "auth-code-client",
            clientSecret: "secret",
            grantType: "authorization_code",
        };
    },
    created: function() {
        
        // send data
        var data = {
            grant_type: this.grantType,
            client_id: this.clientId,
            code: code,
            redirect_uri: redirectURI,
        };
        console.log("data: ", data);
        if(!data){
            alert("data가 없습니다.");
            return;
        }
        var queryString = qs.stringify(data);
        console.log("queryString: ", queryString);

    }
};
</script>

 

주의사항

import할 때, qs를 {}로 묶어서 하면 qs.stringify 실행 시 오류가 발생한다.

vue.runtime.esm.js?5593:1888 TypeError: Cannot read property 'stringify' of undefined
    at VueComponent.created (LoginGroupware.vue?b71e:65)
    at invokeWithErrorHandling (vue.runtime.esm.js?5593:1854)
    at callHook (vue.runtime.esm.js?5593:4219)
    at VueComponent.Vue._init (vue.runtime.esm.js?5593:5008)
    at new VueComponent (vue.runtime.esm.js?5593:5154)
    at createComponentInstanceForVnode (vue.runtime.esm.js?5593:3283)
    at init (vue.runtime.esm.js?5593:3114)
    at merged (vue.runtime.esm.js?5593:3301)
    at createComponent (vue.runtime.esm.js?5593:5978)
    at createElm (vue.runtime.esm.js?5593:5925)

 

>잘못된 qs import 방법:

import { qs } from "qs";

 

>올바른 qs import 방법: 

import qs from "qs";