[NestJS] 어드민 패널 설치: AdminBro

nestjs에서 사용할 수 있는 admin panel 패키지는 대표적으로 두가지가 있다. 하나는 nestjs-admin, 또 다른 건 admin bro. 두 가지 모두 설치를 시도해보았고, 결론부터 말하면 adminbro를 사용하기로 했다.

[NestJS] 어드민 패널 설치: nestjs-admin

nestjs-admin과 마찬가지로 adminBro도 자동 어드민 인터페이스를 생성해준다. Django Admin, Rails Admin, Active Admin에 영감을 받았다고 한다.
nestjs-admin과 비교해보면, 주간 다운로드 수가 10배 정도 많다. 관리도 비교적 최근(3개월 전)까지 이뤄지고 있다.

AdminBro

AdminBro는 라우트를 렌더하기 위해 프레임워크를 활용한다. 지원하는 프레임워크는 아래와 같다.

• Express
• Hapi
• Koa.js
• Nest.js

각각의 프레임워크에 따라 플러그인이 따로 있는데, 공식 홈페이지에서 확인할 수 있다.

@admin-bro/nestjs

우리팀은 NestJS 만 사용하고 있으므로, @admin-bro/express 대신에 @admin-bro/nestjs를 사용한다.
app.module.ts에서 관련 설정을 해주면 된다. 프로그램의 설정 상 생략된 부분은 ... 로 돼있다.

에러상황

이런 에러가 무지막지하게 뿜어져나왔는데, type이 여러 모듈에서중복돼있어서 그렇다.
type 중복으로 인한 에러 때문에tsconfig.json에서 "skipLibCheck": true, 설정해줘야 합니다.

설정하기

import { Database, Resource } from 'admin-bro-typeorm';
import { Alarm } from './alarms/entities/alarm.entity';
import { Chat } from './chats/entities/chat.entity';
import { Game } from './games/entities/game.entity';
import { ChatLog } from './chat-logs/entities/chat-log.entity';
import { Follow } from './follows/entities/follow.entity';
import adminBro from 'admin-bro';

adminBro.registerAdapter({ Database, Resource });

@Module({
  imports: [
    GraphQLModule.forRoot({
      ...
    }),
    AdminModule.createAdmin({
      adminBroOptions: {
        resources: [User, Game, Alarm, Chat, ChatLog, Follow],
        rootPath: '/admin',
      },
    }),
    ...
  ],
 ...
})
export class AppModule {}

어댑터를 설정해주고, admin 페이지에서 확인하고 싶은 데이터는 resource에 넣어둔다. 이미 작성해둔 Entity를 넣어두면 된다.

커스텀 로그인 로직

import { Database, Resource } from 'admin-bro-typeorm';  
import { Alarm } from './alarms/entities/alarm.entity';  
import { Chat } from './chats/entities/chat.entity';  
import { Game } from './games/entities/game.entity';  
import { ChatLog } from './chat-logs/entities/chat-log.entity';  
import { Follow } from './follows/entities/follow.entity';  
import adminBro from 'admin-bro';

adminBro.registerAdapter({ Database, Resource });

const adminUserInfo = {  
email: 'admin@admin.com',  
password: 'admin',  
};

@Module({  
  imports: [  
    GraphQLModule.forRoot({  
    ...  
    }),  
    AdminModule.createAdmin({  
      adminBroOptions: {  
      resources: [User, Game, Alarm, Chat, ChatLog, Follow],  
      rootPath: '/admin',  
      },  
      auth: {  
        authenticate: async (email, password) => {  
        if (adminUserInfo.email === email && adminUserInfo.password === password) {  
            return adminUserInfo;  
          }  
        return null;  
        },  
        cookiePassword: 'some-secret-password-used-to-secure-cookie',  
        cookieName: 'delicious-cookie',  
      },  
    }),  
    ...  
    ],  
  ...  
})  
export class AppModule {}

AdminModule.createModule 내의 auth로 인증 절차를 만들어 둘 수 있는데,
간단하게 authUserInfo의 이메일과 패스워드만 같으면 인증되도록 했다.
원래 하고싶었던 건 기존 유저에 auth를 설정하는 것이라, 리팩토링이 필요하다.
지금 이 코드 자체도 부족한 게 password를 정말 날 것 그대로 확인하고 있어서...