Nextjs app router middleware + token 여부에 따른 리다이렉트

토큰 로직은 아래와 같습니다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// root/utils/token.ts
class AuthToken {
  private _token: string;

  constructor() {
    this._token = '';
  }

  getToken() {
    console.log('get token', this._token); // middleware에서는 빈 문자열 출력

    return this._token;
  }

  setToken(token: string) {
    this._token = token;
    console.log(this._token, 'set token'); // 로그인 시 token 정상적으로 들어옴
  }
}

export const authToken = new AuthToken();

next.js의 middleware는 서버에서 실행되는 것이라 브라우저의 로컬 저장소에 접근할 수 없습니다. 토큰 저장 장소를 쿠키로 수정하시거나 전역상태를 유지하시려면 client에서 라우트가드를 설정하셔야 할 거에요