Vue.js(Quasar) 데이터 매칭문제 해결

 

2020/01/20 - [문제/Vue.js] - SSR 데이터 매칭 문제......

SSR 데이터 매칭 문제......

위 문제뿐만아니라, 거의 모든 문제를 해결한것같아서 상당히 만족스럽다.

사실 위 문제는 문제도 아니였...

 

두가지 해결방안이있다.

src/router/index.js 에서 해결하거나 [비추!]

// 이유는 뭐.. 안써도 다들아시겠지만..
// 아래와같은 코드는 결국 2번요청을 하게되서 요청만 많아지기에.. 비추

router.beforeEach((to, from, next) => {
...
if(to.matched.some){
// 이곳에 $axios.post(`/member/:id`) 요청
$axios.post(`/member/:id`).then(res=>{
	if(res.data.some){
    	...
    } else {
    	// 여기서 redirect
    }
})
}

 

src-ssr/index.js 에서 해결해주는 방법 [추천]

app.get('*', (req, res) => {
  res.setHeader('Content-Type', 'text/html')
  ssr.renderToString({ req, res }, (err, html) => {
    if (err) {
      if (err.url) {
        res.redirect(err.url)
      }
      else if (err.code === 404) { // <- 이부분!
        res.status(404).send('404 | Page Not Found')
      }
  
 // 해당부분에서 404, 500 에러를 404 페이지로 리다이렉트

뭐 간단하게 404, 500 등을 404 페이지로 리다이렉트하라 설명하였으나, 500 에러는 다른 오류페이지로 이동시키는걸 추천한다.

 

참고로 index.js 에서는 Production 모드에서만 사용하며, Dev, Production 모드 둘다 사용하기위해서는

src-ssr/extension.js 에서 따로 코드를 작성해주면 된다.

 

사실 그동안

Quasar 에서 SSR 작업을하면서 문제가 되었던부분은 바로... 토큰이였다.

 

백엔드는 Python을 사용하고있으며, jwt 를 받아와서 Quasar Cookies 에 저장을하여 사용하는데

Client 에서는 401 에러시 refresh_token 을 이용해 백엔드서버에 토큰발급 api에 요청을하지만

Quasar Web backend (node.js) 에서는 쿠키를 정상적으로 받아오지못하거나 마지막으로 발급받은 토큰이 들어가버리는 아주 큰이슈가있었다. (마지막으로 발급받은 토큰은 그냥 모든 사용자가 마지막으로 발급받은 토큰을 말함..)

 

그래서

아예 서버사이드렌더링을 하는부분에서 jwt 인증을 거치지않는 방법을 생각했는데

해당 방법으로 해결한다해도 간혹 클라이언트에서도 refresh_token 발급을 못하는 문제가 생기기도하였기때문에

임시방편도 못되는.. 그런 방법이었다.

 

결국 해결하기는했지만.. [해당방법은 추후 포스팅에서 공유..]