삽질 FE

아아아아아아아아아아아아ㅏㅇ

 

프엔 넘 싫다 발목잡는 1순위 인듯

 

js ㅗㅗ

 

금요일 + 오늘 하루 종일 고민한것 

그것은 로그인 성공적으로 하면

회원가입버튼과 로그인버튼이 삭제되고 글쓰기와 로그아웃버튼이 나오게하는것

 

난 처음에는 책보고 CRUD구현한거에서 로그인은 스파르타에서 인강배운거 짬뽕시켰는데

일단 책은 소셜로그인을 기본전제로하기때문에 스프링시큐리티까지 써먹어서 이거는 내범위가 아니였다...

숙제 의도와도 맞지않고..

사실 써먹어볼라다 무조건 구글로그인으로 연결되어서 포기한것..

 

추가로 책은 머스테치를 이용해서 로그인성공시 화면을 유저아이디를 세션?에 전달해주는 방식으로 했는데

그러면 나도 비슷하게 적용해볼라다가 오류만 엄청나서 이것만으로도 금요일 날렸고.. 결구 원상복귀하고

 

스파르타 강의자료를 하나하나 분석했다... js파일 이랑 컨트롤러만 엄청 왔다갔다하면서 봤다

스파르타인강 방식은 JWT이용함 ! 로그인성공시 토큰을 생성  클라이언트에게 전달해서 쿠키에 저장때리는건데 

그래서 로그인해서 다시 쿠키에 저장된 토큰값이 있으면 로그인성공이라 생각하고 버튼을 show하든가 hide하든가

하는 방식으로 하길래 비슷하게 따라했다

function  getToken() {
    let cName = 'Authorization' + '=';
    let cookieData = document.cookie;
    let cookie = cookieData.indexOf('Authorization');
    let auth = '';
    if(cookie !== -1){
        cookie += cName.length;
        let end = cookieData.indexOf(';', cookie);
        if(end === -1)end = cookieData.length;
        auth = cookieData.substring(cookie, end);
    }
    return auth;
}

 

이건 강의자료 쿠키에 저장된 토큰 얻어오기

 

function login() {

    let username = $('#login-id').val();
    let password = $('#login-password').val();

    if (username == '') {
        alert('ID를 입력해주세요');
        return;
    } else if(password== '') {
        alert('비밀번호를 입력해주세요');
        return;
    }

    $.ajax({
        type: "POST",
        url: `/api/user/login`,
        contentType: "application/json",
        data: JSON.stringify({username: username, password: password}),
        success: function (response, status, xhr) {
            if(response === 'success') {
                let host = window.location.host;
                let url = host + '/';

                document.cookie =
                    'Authorization' + '=' + xhr.getResponseHeader('Authorization') + ';path=/';
                window.location.href = 'http://' + url;
            } else {
                alert('로그인에 실패하셨습니다. 다시 로그인해 주세요.')
                window.location.reload();
            }
        }
    })
}

요건 토큰을 쿠키에 저장하는 것인듯..!

로그인 정보가 일치할시...컨트롤러에서 success응답을 보내준걸 받아서 ajax가 판단함?!

@ResponseBody
@PostMapping("/login")
public String login(@RequestBody LoginRequestDto loginRequestDto, HttpServletResponse response){
    userService.login(loginRequestDto, response);
    return "success";
}

컨트롤러는 ~ 디티오이용해서 ~ 서비스접근 ~ 서비스는 ~ 유저레포에서 일치정보판단해서 넘겨줌

 

 

 

무튼...내가한 뻘짓은..

분명히로그인성공하고 F12눌러서 확인해보면 분명히 토큰잘 전달했고 잘 전달 받았는데

화면은 그대로 회원가입과 로그인버튼이 살아있는것이였다

 

그렇게...토큰은 유지한채로 서버만 재가동시키고 계속 로그인성공만 시키고 토큰을 계속 리필만 해줬다...

 

show랑 hide 반대로 적은 줄도 모르고... 이거 완전 뻘짓아닌가... 하지만 눈치 못 챈이유는 토큰이 계속 유지되고 있었기때문...

 

난 서버내리면 토큰도 없어지는줄 알았지만 ... 클라 쿠키에 저장되어서 안없어지고 시정된 시간이 지나야만 없어지나보다...

 

이걸 일요일 저녁에 뻘짓하면서 깨달았다. ...

 

진작 로그아웃 버튼 만들어서...토큰을 초기화시켜주면서 확인했어야하는데....

 

무튼 너무 기쁘다 기쁘다 기쁘다 2일간의 개고생...이였다!

 

추가로... 알쏭당송한건 이것... 새로운 인덱스를 전달?해주는것

 @GetMapping("/")
    public ModelAndView index(){
        return new ModelAndView("index");
    }

굳이 게시판은 필요가 없는는 거같다 인강은 유저들마다 다른 index를 보여줘야하니까  새로운 index를 찍어내고

 

내가만드는 게시판은 공용이쓰고 사용자만 통제하면되니까... 새로 만들 필요는 없겠다는 생각..?

 

어떻게 변할지

 

모르겠다 숙제는 늦었어도. 무튼 기분좋다 ! 

 

이제 숙제 조건에 맞게 수정해나가면 되겠다!

 

 

난 ...백엔드 로직이 빈약한데 점점 프엔쪽만 파는기분은 뭘까..?