Nest - Next | n2server | Passport , JWT | decode in Client

전 포스트에서 올바른 ID, PW가 전달됐을 경우 토큰을 생성하고 반환하는 것까지 해보았다.

 

이번 포스트에서는 쿠키에있는 JWT를 복호화하는 과정을 구현해볼 것이다.

 

NextJS JWT

먼저 쿠키를 읽어오기 위해 next-cookies를 설치한다. (NextJS)

$ npm i next-cookies

 

복호화 하기위해 아래도 설치한다.

$ npm i jwt-decode
$ npm i @types/jwt-decode --save-dev

 

dashboard/index 에 import 해주고 getServerSideProps 쪽에 확인하는 코드를 작성해준다.

src/dashboard/index.tsx

import axios from 'axios'
import type { GetServerSideProps, NextPage } from 'next'
import Link from 'next/link'
import cookies from 'next-cookies'
import jwtDecode, { JwtPayload } from 'jwt-decode'


interface Props {
    data : any
}


const Dashboard:NextPage<Props> = ({data}) => {
    return (
        <div>
            <div className='dashboard'>
                Dashboard
            </div>
        </div>
        )
}


export default Dashboard;

export const getServerSideProps:GetServerSideProps = async (context) => { // SSR
    const token = cookies(context).token;
    const decodedToken: JwtPayload = jwtDecode<JwtPayload>(token ? token : '');
    console.log(decodedToken)
    
    return {
        props: {
        }
    }
}

 

 

로그인에 성공해서 쿠키에 담긴 토큰을 decode해서 콘솔에 찍어 확인해보자.

 

 

로그인 성공 :

 

NextJS 서버 콘솔 ( 서버사이드라 브라우저에서 뜨지 않습니다. )

 

추가로 시간이 지나거나 토큰이 읽히지 않는경우 다시 첫 페이지로 가게끔 코딩한다.

src/dashboard/index.tsx

export const getServerSideProps:GetServerSideProps = async (context) => { // SSR
    try {
        const token = cookies(context).token;
        const decodedToken: JwtPayload = jwtDecode<JwtPayload>(token ? token : '');
        
        if(decodedToken) {
            return {
                props: {
                }
            }
        }
        else {
            return {
                redirect: {
                destination: '/',
                permanent: false,
                },
            }
        }
    }
    catch(e) {
        console.log(e)
        return {
            redirect: {
            destination: '/',
            permanent: false,
            },
        }
    }
}