개발자
Nextjs app router middleware + token 여부에 따른 리다이렉트
안녕하세요, next.js로 팀 프로젝트 진행 중 궁금한 것이 생겨 질문드립니다. next.js의 middleware.ts를 이용하여 모든 라우터에 접근할 때마다 유저 인증 토큰을 확인 후, 토큰이 없으면 /login 페이지로, 토큰이 있다면 원하는 페이지로 이동할 수 있도록 처리하길 원합니다. 유저 토큰은 로그인 시, access token을 body로 내려 받아 전역 utils 파일에 클래스 형태로 저장하고 있고, refresh token은 쿠키로 내려 받아 필요할 때마다 토큰 재발급 요청을 보낼 수 있도록 설계하고 있어요. 그런데 middleware.ts에서 전역으로 관리하는 토큰에 접근이 불가능한 것 같더라구요.. accessToken을 쿠키로 관리하지 않으면 미들웨어에서 토큰에 접근하는 방법이 아예 없는 것일까요? 아니면 제가 뭔가 단단히 착각하고 있는 것이라면 도움을 요청하고 싶습니다! 감사합니다🙇♂️
답변 2
익명
작성자
2024년 03월 20일
토큰 로직은 아래와 같습니다!
1// root/utils/token.ts
2class AuthToken {
3 private _token: string;
4
5 constructor() {
6 this._token = '';
7 }
8
9 getToken() {
10 console.log('get token', this._token); // middleware에서는 빈 문자열 출력
11
12 return this._token;
13 }
14
15 setToken(token: string) {
16 this._token = token;
17 console.log(this._token, 'set token'); // 로그인 시 token 정상적으로 들어옴
18 }
19}
20
21export const authToken = new AuthToken();
next.js의 middleware는 서버에서 실행되는 것이라 브라우저의 로컬 저장소에 접근할 수 없습니다. 토큰 저장 장소를 쿠키로 수정하시거나 전역상태를 유지하시려면 client에서 라우트가드를 설정하셔야 할 거에요
익명
작성자
2024년 03월 20일
그렇군요, 답변 감사합니다!! 그런데 궁금한 점이, access token, refresh token 모두 쿠키에 저장해도 secure, httpOnly 옵션만 잘 적용해주면 보안 상 큰 문제가 되지 않을까요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 03월 20일
Next.js는 로그인 상태를 관리하는데 사용되는 액세스 토큰과 같은 클라이언트 측 상태를 middleware에서 직접 액세스할 수 없습니다. 서버사이드에서 실행되기 때문에, 여기서 클라이언트 전용 오브젝트나 저장 공간에 접근하는 것은 불가능합니다. 반면, 서버와 클라이언트 모두에 의해 액세스 가능한 쿠키는 이 문제를 해결할 수 있는 방법 중 하나입니다. 그래서 보통은 Access Token이나 Refresh Token을 쿠키에 저장합니다. 따라서 AccessToken을 쿠키로 관리하지 않으면 미들웨어에서 토큰에 접근하는 것은 어려울 것 입니다. 다음의 예시 코드를 참고하실 수 있습니다: ```ts import { NextRequest, NextResponse } from 'next/server' export function middleware(req: NextRequest) { // Get the token from cookie const cookie = req.cookies['access_token'] if (!cookie) { // If there's no token, redirect to login return NextResponse.redirect('/login') } // If there's a token, continue to the route handler return new Response(null) } ``` 위 코드에서 함수 `middleware`는 각 요청(request)에 대해 호출되며 요청 객체(req)로부터 쿠키를 추출하여 액세스 토큰 유무를 확인합니다. 만약 토큰이 없다면 로그인 페이지로 리다이렉트되고, 토큰이 있다면 요청이 그대로 진행됩니다. 하지만 주의하실 점은 이 방식은 SSR(Server Side Rendering)을 사용하는 경우에만 유효하며, CSR(Client Side Rendering)에서는 적용되지 않습니다. 클라이언트 사이드에서 별도의 인증 처리 로직이 필요할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!