#1. 홈페이지 화면 설계

먼저 홈페이지 화면을 위한 소스코드를 정리하고자 한다. 홈화면은 우선 저장된 경기정보를 띄워주는 식으로 구성되어 있다. 이를 위해선 다음과 같은 것들이 필요하다.

 

1) JWT방식으로 로그인이 되어 있는지 체크해야 하고,

2) index.html을 렌더링해줄 때, 경기정보를 같이 보내주어야 한다.

 

html 파일이 짧지 않기 때문에 로직을 담당하는 파일만 살펴보고자 한다.

 

@app.route('/')
def home():
	//matches라는 collection에서 응원시간의 최신순으로 데이터를 가져온다.
    matches = list(db.matches.find().sort('cheer_datetime', -1))
	
    //그리고 가져온 데이터에서 id를 하나씩 꺼내 문자형 데이터로 변환해준다
    for match in matches:
        match["_id"] = str(match["_id"])

	//홈화면으로 요청이 들어왔을 때, 토큰을 가지고 있는지를 체크한다
    //다시 말해 로그인 여부를 판별해주는 것이다. 로그인이 되어 있는 경우에만 경기정보를 보여준다.
    token_receive = request.cookies.get('mytoken')
    try:
    	//토큰이 있다면, 시크릿키를 이용해 토큰을 해독한다
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        
        //그리고 토근 내에 있는 유저 정보와 동일한 아이디를 users라는 collection에서 찾는다
        user_info = db.users.find_one({"user_id": payload["id"]})
        
        //이렇게 찾은 경기정보와 유저정보를 같이 렌더링해준다
        return render_template('index.html', user_info=user_info, matches=matches)

    except jwt.ExpiredSignatureError:
        return redirect(url_for("login", msg="로그인 시간이 만료되었습니다."))
    except jwt.exceptions.DecodeError:
        return redirect(url_for("login", msg="로그인 정보가 존재하지 않습니다."))

JWT 방식은 결국 토큰이 로그인 여부를 판별할 수 있다. 그리고 이 토큰에는 로그인 정보가 담겨져 있는 것이고, index.html을 렌더링할 때, 이 토큰이 있는지를 판별하고, 이 정보를 같이 렌더링해주는 것에는 2가지 이유가 있다.

 

1) index.html과 함께 로그인 정보가 같이 전달된다면 index.html에서 jinja2의 조건문을 활용해 로그인시에만 보여줄 수 있는 ui를 설정할 수 있다.

2) 또한 index.html로 이루어진 ui에 로그인 정보 즉, 로그인한 유저의 아이디를 홈페이지에 데이터바인딩해줄 수 있다.