Vue (45) 썸네일형 리스트형 (Login-2) 로그인 인증, 인증 만료 1. Login 페이지에서 아이디 비밀번호 오류 //Login.vue methods: { loginSubmit() { //1. 아이디 비밀번호가 입력됐는지 확인 if(this.email&&this.password){ let saveData = {}; saveData.email = this.email; saveData.password = this.password; try { this.$axios.post("/authenticate", JSON.stringify(saveData), { headers: { "Content-Type": `application/json`, }, }) .then((response) => { if (response.status === 200) { alert("로그인 성공") this.. (Login-1) JWT 로그인 방식 Springboot & Vue 를 사용하여 JWT 로그인 방식을 구현해보자 지난시간에 Springboot에서 구현한 JWT토큰을 Vue에서 사용할 예정이다 50 : /test - sequence diagram 1. 토큰이 없을때 JwtRequestFilter - request.getHeader("Authorization")의 정보가 null이다. 따라서 if문을 통과하지 못하고 401 error와 "JWT Token does not begin with Bearer String" 예외가 발생한.. dwc04112.tistory.com 1. Vuex로 상태 관리 1-1 store / modul 2. 인증 토큰 2-1 토큰 발급받아 state에 저장하기 (Login) 2-2 HTTP 헤더에 인증토큰 실어서 보.. 10. 새로고침시 Vuex 상태 유지 (vuex-persistedstate) 로그인 부분을 구현하는 중 잠깐만 사이트를 이동하거나 새로고침을 하면 state가 모두 초기화 되어서 화면 데이터가 다 날라간다. 나는 로그인 구현이 다 끝나고 설치를 했지만.. (꼭..) 미리 설치해두면 무척 편하다... Vuex 문제점 새로고침을 하면 Vuex의 store state가 모두 초기화가 된다. 이는 Vuex는 Vue의 플러그인이기 때문이다. 새로고침을 하면 Vue 인스턴스가 소멸했다가 다시 생성되는 Vue의 라이프사이클 때문이다 vuex-persistedstate 란? Vuex store의 state에 저장된 값을 웹 브라우저의 localStorage에 저장 및 업데이트를 해준다. 이는 화면이 새로 로딩을 하게 되어도 없어지지 않기 때문에 로딩시 localStorage에 있는 값을 sta.. 9. Vuex에 대해서 Springboot와 Vue 로그인 기능 구현하기 springboot에서 배운 JWT로그인 방식을 Vue에서도 사용하고싶다. 우선 Vue에서 할 일은 로그인 페이지 에서 /authenticate 시 token과 사용자의 정보를 저장하고 이후 api를 요청할때 token을 담아 보내 인증된 사용자라고 증명하는 것 위의 토큰과 사용자의 정보를 저장하기 위해 상태관리 라이브러리인 Vuex를 사용했다. Vuex란? Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 무수히 많은 컴포넌트의 데이터를 관리하기 위한 라이브러리 애플리케이션의 모든 컴포넌트들에 대한 중앙 집중식 저장소의 역할 및 관리를 담당 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 사용하기 적합하다 npm으로 Vuex 설치 npm .. 8. 상세페이지 출력 (springboot + vue 6) 상세페이지를 만들기 전 vue-table에서 각 열을 클릭하면 해당 글의 세부페이지로 이동되게 구현한다. (페이지가 넘어갈때 id도 함께 넘겨주자) v-slot을 사용하여 직접 테이블 열을 만들어서 클릭 이벤트를 넣었다. [다음 블로그에 이유가 잘 나와있다] Home.vue {{item.id}} {{ item.subject }} {{item.author }} {{item.writeDate }} {{item.readCount }} v-slot을 사용하여 각 열을 클릭하면 해당하는 id를 이동하는 페이지로 넘겨주게 작성했다. 아래는 클릭을 하면 발생하는 메소드로 vue router의 query방식으로 데이터를 전달한다. methods: { inView(id){ this.$router.push({path:'... 7. 게시판 출력 (Vue + Springboot 연동 5) Vuetify를 사용한 게시판 어찌저찌 Springboot에서 데이터를 가져와서 Vue를 통해 보여줬다. Vuetify를 사용하니 게시판 형태를 구현하기가 너무 쉬워서 깜짝놀랐다 그리고 Springboot에서 구현한 page를 나누는 기능을 여기서는 자동으로 지원해주니 더 편했는것 같다. {{props.item.id}} {{ props.item.subject }} {{ props.item.author }} {{ props.item.writeDate }} {{ props.item.readCount }} headers : 테이블의 헤더를 정의 items : 테이블에 나타낼 내용을 정의 이 두개의 옵션은 보통 data: () 안 쪽에 정의하는 것이 일반적이다. 테이블에 나타내야할 내용이 많아질수록 그대로 나 .. 6. get방식 통신2 (Vue + Springboot 연동 4) axios 통신 이번 연습에는 서버에서 boardList를 받아와서 원하는 내용 보여주자 Home.vue {{user.content}} v-for 지시문으로, for문을 돌려 users를 탐색하여 content를 보여준다. Script data()안에 users 배열 변수 선언 methods에 retieveUsers함수를 추가한다. 이 부분이 Axios를 활용하여 Get 요청을 보내는 것이다. 이후 Mounted에 retieveUsers를 호출한다. Mounted는 lifecycle 단계 중 하나로, 쉽게 얘기하여 페이지가 로드될 때 이 함수를 수행하겠다. 라는 의미이다. 나머지 부분은 [Springboot+vue 연동3] 에서 설명했으니 넘어가도록 하자 springboot 연동 3, 4를 성공적으로 구.. 5. get방식 통신 (Vue + Springboot 연동 3) 드디어 Vue와 Springboot 통신을 위한 준비가 다 되었다. axios를 통해 spring으로 데이터를 보낸 후 다시 Vue로 받아보자 (Get방식 통신) Vue 통신을 확인하기 위해서 프론트의 Home.vue의 코드를 다음과 같이 바꿔주었다 Click {{a}} methods 부분에서 axios를 사용해서 backend와 통신하고 있다 this.axios.get 부분에서 통신을 하고 있고, get방식으로 통신이 진행된다 '/example' 부분은 보내는 주소이다. 스프링에서 /example로 받는부분을 작성 { params: ... } : params에 보낼 데이터를 넣으면 된다. 만약 없다면 안넣어도 된다 .then(result => { }) : 통신을 보낸 다음 데이터의 결과를 볼 수 있게 .. 이전 1 2 3 4 5 6 다음
