본문 바로가기

전체 글

 (268)
doFilter 특정 URL 제외시키기 private static final List EXCLUDE_URL = Collections.unmodifiableList( Arrays.asList( "/signup/**", "/api/member", "/authenticate" )); ... ... ... @Override protected boolean shouldNotFilter(HttpServletRequest request) throws ServletException { return EXCLUDE_URL.stream().anyMatch(exclude -> exclude.equalsIgnoreCase(request.getServletPath())); } sholudNotFilter 메서드를 사용하여 EXCLUDE_URL 리스트에 제외시킬 URL..
(SignUp-1) 회원가입 구현하기 이전에 만들어둔 JspMVC에서 구현한 회원가입 기능을 조금 가져왔다. js로 구현할때 보다 Vue가 더 편리하고 기능도 많은 것 같다. passCheck(){ if(this.passwordCheck===""||null||undefined||NaN){ this.placeholder = "" }else if(this.password!==this.passwordCheck){ this.placeholder = "비밀번호가 틀렸습니다" }else{ this.placeholder="비밀번호가 일치합니다"; } } passCheck를 통해서 비밀번호 일치를 알려주고 Next 버튼을 클릭하면 입력한 사용자의 정보를 Springboot로 데이터를 넘기도록 한다. Springboot member에 닉네임과 이름을 저장할..
12월 3주차 ~4주차 회원가입 구현하기 (변경) 로그인 되어있는 사용자 이름 or 닉네임(추가해야함) 으로 작성자명 설정 (추가) Vue 회원가입 페이지 로그인 정보 (마이페이지) 구현 (추가) Vue 마이페이지 -> vue.store에서? spring에서? 정보 가져올지 글 쓰기 (추가) Vue 글 쓰기 페이지
(Login-3) axios 인터셉터 사용하기 인터셉터란? 인터셉터는 1.요청하기 직전, 2. 응답을 받고 then, catch로 처리 직전에 가로챌 수 있다. 인터셉터는 모든 소스 내 axios가 들어간 부분에 공통적으로 적용이 되어야 한다. 따라서 global config를 해줘야한다. 여러가지 인터셉터를 구현하는 방법이 있지만, axios.interceptors를 내 web application에 전역으로 설정하여 구성하였다. (다음 블로그 참고 :: https://ayoteralab.tistory.com/entry/Vuejs-21-axios-interceptors) import axios from 'axios'; // Add a request interceptor axios.interceptors.request.use( function (co..
(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..
12월 2주차 12월 2주차 할 일 Springboot + Vue JWT방식 로그인 기능 구현 11 로그인기능 2 1. Vuex로 상태 관리 1-1 store / modul 2. 인증 토큰 2-1 토큰 발급받아 state에 저장하기 (Login) 2-2 HTTP 헤더에 인증토큰 실어서 보내기 JWT방식으로 인증을 하여 List를 불러오는데 성공했다 Bearer Authen.. dwc04112.tistory.com Vuex의 속성

티스토리툴바