수정한 파일 위치
Springboot--
- springbootapi.member.Member
- springbootapi.member.MemberRepository
- springbootapi.security.controller.MemberController
Vue.js--
- views.signup
- plugins.axios
기존 Member의 컬럼에 이름과 닉네임을 추가했다.
회원가입시 "이메일, 패스워드, 이름, 닉네임" 을 입력해야한다
1. 닉네임 중복방지 구현
signup.vue 페이지에 doubleCheck 메소드를 생성해 닉네임 중복체크를 구현했다.
- text-field에서 닉네임을 입력 후 중복확인 버튼을 누르면
- doubleCheck메소드를 통해 입력한 닉네임을 Post 방식으로 Springboot에 실어보낸다 (url : signup/doublecheck)
- 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);
});
'Vue > Vue' 카테고리의 다른 글
Store 수정 & 마이페이지 구현 (12.31~1.04) (0) | 2022.01.04 |
---|---|
(signUp-3) 회원가입 마무리 (0) | 2021.12.25 |
doFilter 특정 URL 제외시키기 (0) | 2021.12.23 |
(SignUp-1) 회원가입 구현하기 (0) | 2021.12.16 |
(Login-3) axios 인터셉터 사용하기 (0) | 2021.12.15 |