로그인 후 redirect하기 (리액트 아님)

Why?

• 로그인을 하지 않은 사용자가 로그인 후 이용할 수 있는 페이지로 들어감
  → 로그인 화면으로 전환된 로그인
  → 원래 접속하려고 했던 로그인 후 이용할 수 있는 페이지로 돌아옴!
• 위와 같은 기능이 있으면 사용자가 편리하다!
  
  • ex) 로그인 후 홈에 갔다가 다시 들어가지 않고 원래 페이지로 이동
• 리액트를 이용하지 않더라도 url을 파싱해서 가지고 있다가 원하는 페이지로 이동시킬 때 유용할듯!!

How

• Flask 서버를 이용한 예시이다!
• 만약 서버에서 로그인 정보가 없는 사용자가 로그인이 필요한 페이지에 접속하려 했을 때, jwt-token을 이용해서 이를 감지한다!
• jwt-token이 유효하지 않으면 로그인 페이지로 redirect하면서 쿼리 파라미터로 기존에 접속하려고 했던 페이지의 url을 보낸다.
  • 예를 들어 로그인 페이지의 url이 /login이고 기존에 접속하려 했던 페이지의 url이 /addboard라면
    login?redirectUrl=addboard와 같이 보낸다
• 클라이언트가 로그인에 성공하고 서버에서 response를 받으면 url에 있는 쿼리파라미터로 페이지를 전환한다!
  • 클라이언트가 로그인에 성공했다는 응답을 받으면 url을 파싱해서 쿼리파라미터에 있는 원래 가려고 했던 url로 이동!

예시화면

• redirectUrl=addboard라는 쿼리 파라미터를 클라이언트 쪽에서 이용해 로그인 후 바로 addboard 페이지로 넘어간다!

예시코드

서버 (flask)

@app.route('/addboard')
def addboard():
    token_receive = request.cookies.get('mytoken')
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        return render_template('addboard.html')
    except jwt.ExpiredSignatureError:
        return redirect(url_for("login", msg="로그인 시간이 만료되었습니다."))
    except jwt.exceptions.DecodeError:
        # 로그인 후 원래 페이지로 돌아가기 위해 redirectUrl을 뿌려줌
        # 아래처럼 리다이렉트하면 브라우저 url이 /login?redirectUrl=addboard처럼 변경되고
        # login() 함수가 호출되어 redirectUrl=addboard라는 쿼리파라미터를 받고 
        # render_template('login.html') 로 login.html 화면이 나타난다.
        # 로그인 페이지를 렌더하는 login()함수에서 redirectUrl 쿼리 파라미터를 받아 사용하지 않고
        # 클라이언트에서 브라우저의 url을 파싱해서 로그인 요청이 완료되면 해당 페이지로 이동시킴!
        return redirect(url_for("login", redirectUrl="addboard"))


# 로그인
@app.route('/login')
def login():

    return render_template('login.html')

클라이언트 (ajax)

// 현재 URL을 파싱해서
// redirectUrl이 있으면 로그인 요청 성공후 해당 url로 이동하게 해줌!
// app.py의 addboard()함수의 설명을 읽어보자!
// 기본적으로 돌아갈 주소는 '/' => 메인화면
const url = new URL(window.location.href);
let redirectUrl = '/'
// 로그인이 필요한 페이지에 접속해서 리다이렉트 되었을 경우 로그인 후 원래 페이지로 돌아가기
// 위해서 url 쿼리파라미터에 있는 돌아갈 주소를 가져온다
if (url.searchParams.get('redirectUrl') !== null) {
    redirectUrl = url.searchParams.get('redirectUrl');
}

function login() {
    $.ajax({
        type: "POST",
        url: '/api/login',
        data: {
            id_give: $("#input-userid").val(),
            pw_give: $("#input-password").val()
        },
        success: function (response) {
            if (response['result'] == 'success') {
                ///쿠키생성
                $.cookie('mytoken', response['token']);
                // redirectUrl로 이동!
                window.location.href = redirectUrl
            } else {
                // 로그인이 안되면 에러메시지를 띄웁니다.
                alert(response['msg'])
            }
        }
    })
}