(signup-2) 중복확인

수정한 파일 위치

 

Springboot--

• springbootapi.member.Member
• springbootapi.member.MemberRepository
• springbootapi.security.controller.MemberController

 

Vue.js--

• views.signup
• plugins.axios

---

기존 Member의 컬럼에 이름과 닉네임을 추가했다.

회원가입시 "이메일, 패스워드, 이름, 닉네임" 을 입력해야한다

 

1. 닉네임 중복방지 구현

 

signup.vue 페이지에 doubleCheck 메소드를 생성해 닉네임 중복체크를 구현했다.

1. text-field에서 닉네임을 입력 후 중복확인 버튼을 누르면
2. doubleCheck메소드를 통해 입력한 닉네임을 Post 방식으로 Springboot에 실어보낸다 (url : signup/doublecheck)
3. Springboot의 MemberController에서 닉네임을 받아서 비교 후 결과값을 Vue로 리턴

 

// Vue - signup 의 methods 부분
doubleCheck(){
  let saveData = {};
  saveData.nickname = this.nickname;

  this.$axios.post("signup/doublecheck",JSON.stringify(saveData),{
    headers: {
      "Content-Type": `application/json`,
    },
  })
      .then(response=>{
        this.checkNum = response.data;
        if(this.checkNum===0){
          alert("사용가능한 닉네임 입니다")
        }else{
          alert("중복된 닉네임 입니다")
        }
        console.log(response.data);
      })
      .catch(error =>{
        console.log(error.response);
      })
}

signup.vue의 methods 부분이다

로그인에서 구현한것 처럼 JSON형식으로 변환 후 데이터를 담아서 요청한다.

 

// Springboot - MemberController
@PostMapping("signup/doublecheck")
    public Integer doubleCheck(@RequestBody MemberDto memberDto){
        log.debug("닉네임? : "+ memberDto.getNickname());
        String nick = memberDto.getNickname();
        return check(nick);
}

public Integer check(String nick){
        return memberRepository.getMemberByNickname(nick);
}

다음은 Springboot의 MemberController

doubleCheck에서 받은 닉네임을 중복확인 해주는 check로 보내서 중복확인

(회원가입에서 한번 더 사용하기 때문에 분리해서 구현했다)

 

그리고 전역으로 설정되어있는 vue의 인터셉터에서 (토큰을 실어주는 Request 부분) 예외 URL을 추가

if문을 사용하여 특정 URL을 제외 (다른 방법을 찾으면 수정해서 추가하겠음)

 

//axios.js
axios.interceptors.request.use(function (config) {
    console.log('request interceptor!!!!')
	// 예외 url
    if(document.URL.match("signup")){
        console.log("인증이 필요없는 url : " + document.URL)
        return config;
    }
    
    config.headers.Authorization = "Bearer "+store.state.userStore.token;
    return config;
}, function (error) {
    return Promise.reject(error);
});

 

 

 

인터셉터에서 예외 처리하여 토큰을 담지않고 request