FastAPI 프로젝트 진행(로그아웃 기능 구현) - 92

1. auth.py 새로운 API 생성

@router.get("/logout")
async def logout(request: Request):
    msg = "logout Successful"
    response = templates.TemplateResponse("login.html", {"request":request, "msg":msg})
    response.delete_cookie(key="access_token")
    return response

response를 직접 return
delete_cookie로 현재 cookie에 저장된 JWT를 삭제

 

2. 웹 확인

API 호출을 통해서 알럿과 함께 cookie상의 데이터가 없어진 것을 확인할 수 있다.

 

3. navbar.html에 로그아웃 버튼 추가

<div>
    <nav class="navbar navbar-expand-md navbar-dark main-color fixed-top">
        <a class="navbar-brand" href="#">Todo App</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
               {% if user %}
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
               {% endif %}
            </ul>

           <ul class="navbar-nav ml-auto">
              {% if user %}
              <li class="nav-item m-1">
                 <a type="button" class="btn btn-outline-light" href="/auth/logout">Logout</a>
              </li>
              {% endif %}
           </ul>
        </div>
    </nav>
</div>

이렇게 했을 때 로그인을 해도 로그아웃 버튼을 볼 수 없다.
사용자(user 데이터)를 확인하는 작업이 필요하다.

 

4. todos.py TemplateResponse를 받는 API 수정

@router.get("/", response_class=HTMLResponse)
async def read_all_by_user(request: Request, db: Session = Depends(get_db)):

    user = await get_current_user(request)
    if user is None:
        return RedirectResponse(url="/auth", status_code=status.HTTP_302_FOUND)

    todos = db.query(models.Todos).filter(models.Todos.owner_id == user.get("id")).all()
    return templates.TemplateResponse("home.html", {"request":request, "todos":todos, "user": user})


@router.get("/add-todo", response_class=HTMLResponse)
async def add_new_todo(request: Request):
    user = await get_current_user(request)
    if user is None:
        return RedirectResponse(url="/auth", status_code=status.HTTP_302_FOUND)

    return templates.TemplateResponse("add-todo.html", {"request":request, "user": user})


@router.get("/edit-todo/{todo_id}", response_class=HTMLResponse)
async def edit_todo(request: Request, todo_id: int, db: Session = Depends(get_db)):

    user = await get_current_user(request)
    if user is None:
        return RedirectResponse(url="/auth", status_code=status.HTTP_302_FOUND)

    todo = db.query(models.Todos).filter(models.Todos.id == todo_id).first()

    return templates.TemplateResponse("edit-todo.html", {"request":request, "todo": todo, "user": user})

마지막 응답을 return 할 때 user 데이터도 같이 return 한다.

로그아웃을 눌렀을 때 자동으로 로그인 페이지로 돌아가는 것을 확인할 수 있다.