끄적끄적

사용자 등록 후 로그인이 정상적으로 되면, Navigation Bar 오른쪽 상단에(붉은 사각형 영역) 로그인 사용자 정보, 다른 페이지 이동 및 로그아웃을 포함 하는 메뉴를 추가해보겠습니다.

https://pynecone.io/docs/library/media/avatar 참고

프로젝트 명(폴더) : demo_board

demo_state.py

logout 이 호출되면 State에 저장된값을 모두 reset 시키고 "/login" 페이지로 redirect.

import pynecone as pc

class User(pc.Model, table=True): 
    """A table of Users."""

    username: str 
    password: str
    userrole: str

class State(pc.State):
    """The base state for the app."""
    print("──────────────────── [ State(pc.State) ] ────────────────────")

    username: str
    userrole: str
    logged_in: bool = False

    def logout(self):
        """Log out a user."""
        self.reset()
        return pc.redirect("/login")

demo_helpers.py (기존)

import pynecone as pc
from .demo_state import State

def navbar(State, app_name):
    """The navbar."""
    return pc.box(
        pc.hstack(
            pc.hstack(
                pc.image(src="bada.png", width="48px"),
                pc.heading("Demo Board"),
                pc.heading(" - "+app_name, size="lg", color="navy"),
            ),
            pc.spacer(),
            justify="space-between",
            border_bottom="0.15em solid #d3d3d3",
            padding_x="2em",
            padding_y="1em",
            bg="rgba(255,255,255, 1)",
        ),
        position="fixed",
        width="100%",
        top="0px",
        z_index="500",
    )

demo_helpers.py (변경후)

매뉴에는 사용자 이름, 사용자 권한, 등록되어있는 페이지, 로그아웃을 포함.

import pynecone as pc
from .demo_state import State

def navbar(State, app_name):
    """The navbar."""
    return pc.box(
        pc.hstack(
            pc.hstack(
                pc.image(src="bada.png", width="48px"),
                pc.heading("Demo Board"),
                pc.heading(" - "+app_name, size="lg", color="navy"),
            ),
            pc.spacer(),
            pc.menu(
                pc.menu_button(
                    pc.cond(
                        State.logged_in,
                        pc.avatar(name=State.username, size="md"),
                        pc.box(),
                    )
                ),
                pc.menu_list(
                    pc.center(
                        pc.vstack(
                            pc.avatar(name=State.username, size="md"),
                            pc.text(State.username+"("+State.userrole+")"),
                        )
                    ),
                    pc.menu_divider(),
                    pc.link(pc.menu_item("Servers"),href="/servers"),
                    pc.menu_divider(),
                    pc.link(pc.menu_item("Sign Out"), on_click=State.logout),
                ),
            ),
            justify="space-between",
            border_bottom="0.15em solid #d3d3d3",
            padding_x="2em",
            padding_y="1em",
            bg="rgba(255,255,255, 1)",
        ),
        position="fixed",
        width="100%",
        top="0px",
        z_index="500",
    )