[Node.js] Vue.js에서 url에 포함된 #(Hashbang) 제거하기

문제 발생

Vue.js에서는 기본으로 Hashbang 모드를 사용해 url에 #이 붙게 된다.

처음엔 상관없었는데 나중에 서비스 개발이 복잡해지면서 hydra와 연동해 User Agent를 리다이렉트 URL(Redirect URL)로 설정해야하는 상황이 왔다.
문제는 여기서부터 시작됐다.

hydra를 호출할 때 redirect_url을 파라매터에 묶어서 보내는데, 이 redirect_url이 client 생성 시에 미리 지정한 callback URL과 정확히 일치하지 않으면 오류가 발생한다.

하지만 hydra client를 생성할 때 --callbacks URL에는 특수문자가 포함될 수 없다.
#이나 %를 넣거나 urlencode 값으로 변경해서 넣으면 오류가 발생한다.
따옴표를 붙이고 환경변수로 설정해서 넣어보고 별 방법을 다 해도 안된다. 이건 hydra 자체의 문제인 것 같다. (Docker: oryd/hydra:v1.3.2-alpine 이미지 사용)

 

> --callbacks URL에 #을 넣은 경우

$ hydra clients create \
    --endpoint https://hydra.trustbloc.local:4445 \
    --id test1 \
    --secret secret \
    --grant-types authorization_code,refresh_token \
    --response-types code,id_token \
    --scope StudentCard,EmployeeCard \
    --skip-tls-verify \
    --callbacks https://user.trustbloc.local/#/employID
Config file not found because "Config File ".hydra" Not Found in "[/home/ory]""
You should not provide secrets using command line flags, the secret might leak to bash history and similar systems
The request failed with the following error message:
{
  "error": "invalid_request",
  "error_description": "The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed",
  "status_code": 400
}

 

> --callbacks URL에 %를 넣은 경우

$ hydra clients create \
    --endpoint https://hydra.trustbloc.local:4445 \
    --id test2 \
    --secret secret \
    --grant-types authorization_code,refresh_token \
    --response-types code,id_token \
    --scope StudentCard,EmployeeCard \
    --skip-tls-verify \
    --callbacks https%3A%2F%2Fuser.trustbloc.local%2FemployID
Config file not found because "Config File ".hydra" Not Found in "[/home/ory]""
You should not provide secrets using command line flags, the secret might leak to bash history and similar systems
The request failed with the following error message:
{
  "error": "invalid_request",
  "error_description": "The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed",
  "status_code": 400
}

 

결국 hydra에서는 처리할 수 없다는 결론을 내리고 Vue.js에서 URL에 포함된 #(Hashbang)을 지우는 방식으로 하기로 했다.

 

Vue.js에서 URL에 포함된 #(Hashbang) 제거

VueRouter 내부에서 history 모드로 변경

Vue.js #(Hashbang) 제거를 검색하면 가장 많이 나오는 일반적인 방법이 VueRouter 내부에서 history 모드로 설정하는 것이다.

Vue.js는 기본적으로 Hash 모드를 사용하기 때문에 이를 명시적으로 history 모드로 변경해주면 URL에서 #(Hashbang)이 사라지게 된다.

...
export default function(/* { store, ssrContext } */) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    mode: 'history',
    // mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  });

  return Router;
}

 

그런데 문제는 이렇게 수정했을 때 각각의 페이지들은 정상적으로 #(Hashbang)이 제거된 상태로 출력이 되는데, 페이지 내의 버튼을 눌렀을 때 페이지 이동이 정상적으로 이루어지지 않았다.
이건 라우터에 children이 설정되어 있어서 그런 것 같다.

뿐만아니라 주소창에서 해당 URL로 직접 접근하게 되면 다음과 같이 GET 오류가 발생했다.

Cannot GET /employID/didSelect

뭔가 설정이 잘못된 것 같다.

 

quasar.conf.js 내부에서 history 모드로 변경

그러다 알게 된 사실이 나는 Vue.js로 quasar를 사용해서 클라이언트를 구성했는데, quasar.conf.js 파일 내에도 vueRouterMode가 존재한다는 것이다.

module.exports = function (/* ctx */) {
  return {
    ...
    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'
      ...
    }
    ...
  }
}

여기에서 vueRouterMode가 hash로 설정되어 있었기 때문에 실제 클라이언트에서 설정이 제대로 이루어지지 않은 것이다.

 

VueRouter 내부의 mode는 원래 설정되어있던대로 되돌리고, quasar.conf.js 내부에서 vueRouterMode를 history 모드로 변경하니 모든 페이지에서 #(Hashbang)이 제거되었고, URL을 직접 호출해도 페이지 접근이 가능했다.

 

결론

만약 quasar를 사용한다면 quasar.conf.js 파일을 가장 먼저 확인하는 것이 좋다.

기본 Vue.js의 설정보다 quasar의 설정이 우선해서 적용되는 것 같다.