분류 전체보기68 [Vue.js] Vuex , store로 상태 관리하기( JWT, token 저장 ) 상태관리를 위한 store를 사용하기 위해선 먼저 Vuex를 설치 해야한다. * Vuex 설치 npm install vuex --save npm을 사용해서 vuex를 설치해주면 store.js를 생성해서 상태 관리를 하면 된다. store는 어떤 데이터를 컴포넌트끼리 쉽게 공유하기 위해서 사용하게 되는데, 이런 목적으로 로그인 시 Java web token(jwt)를 store를 통해 관리하게 된다. store에서 사용할 수 있는 기능은 크게 state / getters / mutations / action이 있다. - state(상태) : 관리하고자 하는 상태 - getters : 말 그대로 state값들을 리턴하기 위한 getter 로직 - mutations (변이): state를 변화시키는로직, m.. 2021. 12. 10. [Jwt] Jason Web Token :: JWT 로 로그인 처리하기 * 개발환경 : 스프링부트 / Vue.js 이전에 서블렛이나 스프링에서는 세션을 통한 로그인 처리를 진행했지만, 스프링 부트로 프로젝트를 시작하고 나서는 로그인을 처리할 때 요즘? 많이 사용하는 방법인 토큰 발급 기법을 사용하기로 했다. 해당 유저의 입력 정보가 DB정보와 일치하면, 백에서 해당 유저를 판별할 수 있는 정보가 담긴 Access_token과 재발급을 위한 Refresh_token을 발급해주고 프론트에서는 해당 토큰을 받아 store.js 에 저장 해줄 것이다. 로그인정보 입력부터 사용자에게 token 전달이 되는 전체 구현방식은 ' 사용자 로그인 -> 정보 확인 후 일치 시 토큰 발급 - > 사용자에게 전달 -> 사용자가 API 통신 시 token 함께 전달 ' 이렇게 된다. *** Jwt.. 2021. 12. 8. [Vue.js] Vue.js 서버 연결 시 CORS (Cross Origin)문제 해결하기 * Axios로 서버API에 접근했을 때 발생하는 상황 - CORS ( Cross-Origin Resource Sharing : 교차 출처 리소스 공유) : HTTP 헤더를 사용해서 실행중인 웹(www.aaa.co.kr)에서 다른 출처(www.aaa_1.co.kr)의 API에 접근하려고 할 때 이 권한을 부여하도록 브라우저에게 알려주는 체제이다. 기본적으로 브라우저에서는 보안 상의 이유 때무에 이 교차 출처 요청을 제한하고 있기 때문에 어떠한 설정값도 없이 서로 다른 출처를 가지고서 데이터를 공유하고자 하면 아래의 메시지가 나오게 된다. ( 'ur' has been blocked by CORS policy: ~~ 라고 발생한다. ) 이를 해결하긴 위해선 '이 리소스에 접근하는 것이 허용된 출처' 임을 명.. 2021. 11. 23. [Vue.js] Vue.js axios service 설정 ( Axios 라이브러리 ) * Axios 라이브러리 만들기 작은 규모의 프로젝트를 하게되면 몰라도 큰 프로젝트를 하는 경우엔 하나의 컴포너트 안에 수많은 비동기 처리 로직이 생길 수 밖에 없다. 이런 경우에 Axios 로직만을 따로 처리해 service.js 로 만들어 처리하기로 했다. (컴포넌트에서는 응답/오류를 받아 처리만 해주는 형태가 된다.) -> 백엔드에서 MVC 패턴에서 service(비즈니스 로직)를 만드는 것과 비슷하다고 생각하면 될 듯 하다 ! 1) service 만들기 - schoolService.js import $axiosInst from '@/axios/AxiosInst'; export class schoolService { /** * school 로그인 하기 */ schoolLogin(loginObj) {.. 2021. 11. 19. 이전 1 2 3 4 5 ··· 17 다음
