281일차(모험 190일차) - 닉네임 받아오기

댓글 수정 코드를 작성하면서 문제점을 발견했다.

sessionStorage에 nickname을 저장하는데 저장하는 시점이 로그인 후 자동으로 넘어가는 index 파일(home 페이지)에서 진행된다. 여기서 왜 문제가 되냐면 10s 페이지에서 서버를 재실행하면 다시 로그인을 진행해야 하는데 로그인 후에 home 페이지로 넘어가지 않고 바로 10s 페이지로 넘어가게 된다. 그렇게 되면 닉네임을 저장하지 못하고 바로 넘겨버리기 때문에 null 값이 나오게 된다.

 

backend : [add] 닉네임 값 받아오기 [#83] #84

front : [add] 닉네임 값 받아오기 [#83] #84 

 

 

테스트를 위해서 index.html에 작성된 코드를 주석처리했다.

let nickname = $("#nickname").text();
sessionStorage.setItem("nickname", nickname);

 

sessionStorage에 값이 없는 경우 받아와야하므로 

$(document).ready(function () {
    findNickname()
});

function findNickname() {
    if (!nickname) {
        $.ajax({
            type : "GET",
            url: `http://localhost:8080/finduser`,
            contentType : "application/json",
            data: JSON.stringify(),
            success: function (response) {
                sessionStorage.setItem("nickname", response)
                console.log("null일때 받아오는 닉네임 값 : " + response)
                nickname = sessionStorage.getItem("nickname");
            }
        })
    }
}

@GetMapping("/finduser")
public String findUser(@AuthenticationPrincipal UserDetailsImpl userDetails) {
    return commentService.findUser(userDetails);
}

public String findUser(UserDetailsImpl userDetails) {
    return userDetails.getUser().getNickname();
}

 

 

프로필 라인에 임시로 적어둔 닉네임이 null로 띄워질까봐 setInterval()을 통해서 0.5초마다 변경을 확인 할 수 있게 했다.

if (!nickname) {
    setInterval(function (){
        $("#name").text(nickname + "님 환영합니다.")
    },500)
}

 

 

하지만 한번만 변경을 해도 상관이 없으므로 아래와 같이 작성했다. (setInterval이 한번만 실행)

function reload(){
    $("#name").text(nickname + "님 환영합니다.")
}

if (!nickname) {
    setInterval(reload, 500);
}

출처 : setInterval()이 한번만 실행되고 끝나는 경우

 

 

---

기존 코드 변경(수정 or 삭제)

코드를 작성하면서 발견한 코드인데 로그인이 되어야 받아올 수 있던 로그인 정보를

로그인 되기도 전에 요청하는 코드를 작성했었다.

$(document).ready(function () {
    home()
});

function home() {
    $.ajax({
        type: "GET",
        url: `http://localhost:8080/login`,
        contentType: "application/json",
        data: JSON.stringify(),
        success: function (response) {
            console.log("login")
        }
    })
}

function findSession() { // session 저장
    if (sessionStorage.getItem("nickname")) {
        sessionStorage.removeItem("nickname");
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/user/login/nickname`,
            contentType: "application/json",
            data: JSON.stringify(),
            success: function (response) {
                sessionStorage.setItem("nickname", response)
            }
        })
    }
}

 

findSession 함수는 모두 지우고 기존에 sesstionStorage는 로그인 페이지에 접속하게 되면 자동으로 값을 지워주는 코드로 작성했다.

let saveNickname = sessionStorage.getItem("nickname");
if (saveNickname) {
    sessionStorage.removeItem("nickname");
}

 

 

따라서 findSession 함수와 통신하던 controller도 없앴다.

@GetMapping("/user/login/nickname") // session에 저장하기
public Object sessionRequest(@AuthenticationPrincipal UserDetailsImpl userDetails, HttpSession session) {
    session.setAttribute("nickname", userDetails.getUser().getNickname());
    return session.getAttribute("nickname");
}