728x90 전체 글58 [Vue] Vue.js 게시판 만들기 14 - Vue Router 네비게이션 가드 지난 포스팅에서 JWT를 이용한 로그인을 구현하고 화면에서 로그인 성공 후 발급받은 토큰을 확인했습니다. 이번 포스팅에서는 게시판을 이용하려면 로그인이 필요하도록 화면을 수정해보겠습니다. Vue Router 네비게이션 가드 Vue의 router/index.js에 포함되어있는 컴포넌트로 이동하려고 할때, Vue Router의 네비게이션 가드를 통해 특정 권한을 가지고 있는지 혹은 데이터를 가지고 있는지 확인하여 이동을 제어할 수 있습니다. (https://v3.router.vuejs.org/kr/guide/advanced/navigation-guards.html) 네비게이션 가드의 종류는 3가지가 있습니다. 전역 가드 라우트 별 가드 컴포넌트 내부 가드 이번 포스팅에서 다뤄볼 가드는 라우트 별 가드입니다... 2022. 6. 28. [Vue] Vue.js 게시판 만들기 13 - JWT와 필터 적용 JWT(Json Web Token) 생성 로그인 방법중 토큰을 사용한 로그인을 진행하려고 합니다. JWT를 적용하여 토큰을 발급받고 토큰의 정보를 확인하는 방법을 적용하겠습니다. JWT 의존성은 이전 포스팅에서 추가하였으므로 바로 사용할 수 있습니다. 먼저, 토큰을 생성하고 확인하는 메서드를 생성하겠습니다. util 패키지를 생성하고 JwtUtil.java 파일을 생성합니다. /* util / JwtUtil.java */ import com.auth0.jwt.JWT; import com.auth0.jwt.JWTVerifier; import com.auth0.jwt.algorithms.Algorithm; import com.auth0.jwt.exceptions.JWTVerificationException;.. 2022. 6. 27. [Vue] Vue.js 게시판 만들기 12 - DB 변경과 시큐리티 설정 H2 DB에서 MariaDB로 변경 이전의 백엔드 프로젝트는 H2 Database를 사용했습니다. 로그인 이후 데이터 관리 등을 위해 MariaDB를 세팅하고 사용하도록 합니다. 도커 혹은 로컬에 MariaDB나 MySQL을 설치해주세요. (도커에 MariaDB 설치하기) vue-backboard의 application.yml 내용을 변경합니다. (jpa와 datasource 내용이 변경되었습니다.) datasource의 url과 username, password는 각자의 설정에 맞게 변경해주세요. server: port: 8081 spring: jackson: property-naming-strategy: SNAKE_CASE h2: console: enabled: true settings: web-al.. 2022. 6. 22. [Vue] Vue.js 게시판 만들기 11 - 로그인 화면 만들기 안녕하세요. 이전에 작성한 Vue.js 게시판 만들기를 정말 많은 분들이 찾아봐주셨습니다. 이번 포스팅부터는 로그인과 댓글 기능을 구현하면서 게시판 이외에도 실습해볼 수 있는 샘플 프로젝트를 만들어보려 합니다. 이전의 프론트엔드와 백엔드 프로젝트를 사용하므로 전의 포스팅들을 참고해주세요. (이후 포스팅부터는 챕터별로 브랜치를 업로드할 예정이며, 이번 포스팅까지의 화면 소스는 vue-frontend의 chap11 브랜치에 업로드 되어있습니다.) 로그인 화면 생성 우선 로그인을 진행할 화면을 만들도록 하겠습니다. vue-frontboard 프로젝트를 열고 views 폴더 아래로 common 폴더와 안에 Login.vue 파일을 생성합니다. 로그인 화면 소스를 간단하게 작성합니다. Please Log In L.. 2022. 6. 21. 이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음 728x90
