[NUXT] Nuxt Middleware 로그인 처리하기

Nuxt에서 로그인에 대한 리다이렉팅처리를 기록해두려고한다.
일단 나의 환경은 이렇다 jwt + cookie + nuxt 먼저 로그인 API를 만들어 로그인 성공시 token을 발급해주고, API에서 받은 토큰을 쿠키에 저장해야 한다. 그리고 nuxt middleware에서 토큰을 검사해 토큰이 없다면 로그인페이지로 리다이렉팅을 걸어주고, 토큰이 존재한다면 홈으로 보내주기로 한다.
먼저 로그인처리를 하자. 로그인 Submit로직은 기존 SPA에서 하던 방식과 많이 다르진 않다.

private async login(): Promise<void> {
    const request: SignInRequest = new SignInRequest();

    request.userId = this.form.getFieldValue("userId");
    request.password = this.form.getFieldValue("password");

    try {
      await this.signIn(request);
      await this.$router.push('/');
      await this.$message.success('로그인 되었습니다.');
    } catch (error) {
      this.promiseErrorMessageHandler(error);
    }
  }

로그인 API를 호출하고 성공시 홈으로 보내고 메세지를 띄우는 로직이다. 여기까지는 기존에 하던 방식과 비슷하다.
다만 아래의 처리부터가 조금 다르다. 미들웨어의 처리는 이렇게 하였다.

export default function ({ route, store, redirect }: { route: Route, store: Store<any>, redirect: any }) {
  const token: string | null = store.state.AccountStoreModule.token;
  const whiteList = [
    '/account/login',
    '/account/register',
    '/account/find/id',
    '/account/find/password'
  ];

  // If the user is not authenticated
  if (!whiteList.includes(route.path)) {
    if (!token) return redirect('/account/login');
  } else if (token) return redirect('/');
}

화이트리스트에 해당되는 페이지가 아닌경우 토큰 값이 존재하는지 체크 후 없다면 로그인페이지로 리다이렉트 해주고 화이트리스트인 경우 토큰이 있다면 홈으로 보낸다.
여기서 문제는 nuxt의 경우 ssr방식이기 때문에 로그인시에 저장한 스토어의 토큰값이 날라간다. 그렇기 때문에 쿠키를 이용하고 쿠키값을 이용해 렌더링시에 스토어의 토큰 값에 다시 넣어주는 로직을 만들었다. 아래의 로직을 보자.

actions: {
    nuxtServerInit({ commit }: { commit: Commit }, { req } : { req: Request }) {
      let token = null;
      if (req.headers.cookie) {
        const parsed = cookieparser.parse(req.headers.cookie);
        try {
          token = parsed.token;
        } catch (err) {
          // No valid cookie found
        }
      }
      commit(AccountType.SET_LOGIN_TOKEN, token);
    },
    ...new AccountAction()
  }

nuxt의 라이프 사이클을 보면 nuxtServerInit이란 서버사이드에서 실행되는 함수를 제공해준다. 비동기로 store에 데이터를 셋팅할 수 있다.
또한 storeContext(store..) nuxtContext(res,req...)를 이용할 수 있다.
※ 사용할 수 있는 장소는 /store/index.ts 뿐이므로 주의
그리고 로그인시에 쿠키에 넣어주는 Mutation쪽 처리 로직도 잊지말자.

[AccountType.SET_LOGIN_TOKEN] = (state: AccountState, data: string): void => {
    state.token = data;
    Cookie.set('token', data);
  }

이렇게 하면 준비가 대충 되었다. 확인해보면

로그인을 해보고 새로고침 테스트를 해보았다.

잘된다. 토큰이 존재하는 상태에서 다시 로그인페이지로 이동해보려고하니 홈으로 리다이렉팅도 잘된다.
로그아웃은 쿠키를 삭제해주면 되니 로그아웃에 대한 기능은 생략하도록 하겠다.