#8. Auth & Guest Links

로그인 세션을 이용한 조건부 Links 구현

 

1. 유효한 로그인 유저인지 검증

/src/lib/getAuthUser.js

header -> cookies -> session 정보를 읽어서 jwt 복호화 한 후 올바른 세션값인지 확인 후 로그인 정보 리턴

import { cookies } from "next/headers";
import { decrypt } from "./session";

export default async function getAuthUser() {
  // Get Cookies
  const coookieStore = await cookies();
  const session = coookieStore.get("session")?.value;
  // console.log("session=", session);
  if (session) {
    const user = await decrypt(session);
    return user;
  }
  // 세션이 없으면 null을 반환합니다.
  return null;
}

 

2. Navigation 페이지에서 로그인 정보를 확인 후 로그인 여부에 따른 링크구현

로그아웃 버튼의 경우 form action 에 아래 로그아웃 처리 action 함수로 링크

import getAuthUser from "@/lib/getAuthUser";
import NavLink from "./NavLink"
import { logout } from "@/actions/auth";

export default async function Navigation() {

  const authUser = await getAuthUser();
  // console.log("authUser=", authUser);

  return (
    <nav>
      <NavLink label="Home" href="/" />
      {authUser ? 
        (
          <div className="flex items-center">
            <NavLink label="Dashboard" href="/dashboard" />
            <form action={logout}>
              <button className="nav-link">Logout</button>
            </form>
          </div>
        ) : 
        (
          <div className="flex items-center">
            <NavLink label="Register" href="/register" />
            <NavLink label="Login" href="/login" />
          </div>
        )}      
    </nav>
  )
}

 

3. 로그아웃 처리

/src/actions/auth.js 

// 로그아웃 요청을 처리하는 서버 액션입니다.
export async function logout() {
  const coookieStore = await cookies();
  coookieStore.delete('session');
  redirect("/");
}