tokenMixin을 제거했다. 토큰이 필요한 컴포넌트마다 중복된 코드를 작성하게 한다.
대신 router에서 그 책임을 맡게 했다. 네비게이션을 하기 위해 토큰을 갖고 있어야 하니까?
beforeEach를 이용해 인증이 필요한 컴포넌트를 생성하기 전에 토큰을 갖고 있는지 검사하게 했다.
route에서 meta옵션을 줄 수 있다. requiresAuthentication: true로 설정했다.
beforeEach(to, from, next) => {}로 네비게이션 전에 처리를 할 수 있다.
to.meta.requiresAuthentication를 검사하고, 토큰을 갖고 있을 때만 next(), 그렇지 않다면 next('/SignIn').
async 키워드를 붙여서 비동기 처리도 가능하다. 이렇게 하면 비동기 처리를 해야할 땐 await을 사용해야한다.
await 키워드에서 비동기 처리가 끝날 때까지 기다린다. 이 과정들은 try, catch로 관리해야한다.
ArticleApi에서 router를 갖고와서 직접 이동할 수 있게 했다.
axios요청이 실패하면 결과를 검사해 SignIn페이지로 이동되게 했다.
DeleteArticle.vue 생성.
TODO
백엔드와 연결되어있는지 검사를 해야한다.
비동기 요청이 실패할 경우, 에러를 다룰 객체? 메소드? 에러핸들링이 필요하다.
각 HTTP액션코드에 맞는 에러 핸들 코드를 중복해서 쓰지 말자.
requiresAuthentication: true
로 설정했다.beforeEach(to, from, next) => {}
로 네비게이션 전에 처리를 할 수 있다.to.meta.requiresAuthentication
를 검사하고, 토큰을 갖고 있을 때만next()
, 그렇지 않다면 next('/SignIn'). async 키워드를 붙여서 비동기 처리도 가능하다. 이렇게 하면 비동기 처리를 해야할 땐 await을 사용해야한다. await 키워드에서 비동기 처리가 끝날 때까지 기다린다. 이 과정들은 try, catch로 관리해야한다.TODO