보드가 없는 url 접근시 어떻게 하는게 좋나요?

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

보드 삭제

작성

286

이번 강의로 보드를 삭제한 다음

$router.push('/')

를 통해 홈으로 보내는데요.

하지만 브라우저에서 뒤로가기를 통해 이미 삭제된 보드 url로 접근할 수 있었습니다.

(직접 입력해서도 가능할거구요..)

위와 같은 경우 다시 홈으로 튕겨냈으면 하는데.. 이런 처리는 어떠한 방법으로 하는게 권장되나요?

제 생각에는

@ 단순하게 Board컴포넌트에서 FETCH_BOARD액션을 실행할 때 catch구문으로 홈으로 보낸다.
@ 애초에 없는 페이지 접근이니 404처리를 위해 api/index.js에서 request 모듈의 catch구문에 404처리를 추가한다. (그런데 api단에서는 비동기로 데이터를 불러오는 인터페이스역할을 한다고 생각할 수 있는데 이 단계에서 데이터를 얻지 못 했다고 404처리를 추가하는게 맞을까 싶기도 합니다...)

정도 일까 싶은데요..

네비게이션가드를 사용해볼까 했는데 그러기엔 일단 API서버에서 데이터페치가 일어나봐야 존재유무를 알 수 있으니 이 방법은 어려울거 같은데요..

vue의 관점에서 볼 때 위와 같은 경우 어떤 방법이 권장되는 방법일까요? 궁금합니다..

javascript vuejs

답변 4

송유진

생각 못하고 지나갈뻔 했는데 예리하십니다!
말씀하신대로 api 에 404 추가해주었고 뒤로가기하면 /로 돌아오긴 하는데요,
콘솔에 404에러랑
actions.js?9946:21 Uncaught (in promise) TypeError: Cannot read property 'item' of undefined
at eval
이런 에러가 뜨는데 어떻게 처리해야할까요,,?

hello

성훈 킴님 예리하시네요~! 덕분에 저도 좋은 디버깅하고 갑니다~

SeongHun Kim

질문자

친절한 답변 감사합니다 ~~! 배울수록 재밌는 vue네요 다음에 또 궁금한 점 있으면 여쭤보겠습니다 ^^

김정환

지식공유자

좋은 지적입니다.

보드 페이지에 대한 예외처리 문제인데요,

위에서 언급해 주신 두 가지 방법으로 해결할 수 있겠네요.

두 번째 방법을 더 설명 드리면..

인증을 구현할때 API응답중 401만 onUnauthorized() 함수로 처리했었죠?

마찬가지로 404응답일 경우 onNotFound() 함수로 처리할 수 있습니다.

const NOTFOUND = 404
const onNotfound = () => router.push(`/`)
// ...
if (status === UNAUTHORIZED) onUnauthorized()else if (status === NOTFOUND) onNotfound()

단 이렇게 하려면 서버와 응답 코드에 대한 약속을 한다는 가정이 있어야겠죠.

인프런 커뮤니티 질문&답변

보드가 없는 url 접근시 어떻게 하는게 좋나요?