일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- 엣지컴퓨팅
- 정렬
- adminbro
- 프라이빗클라우드
- 동료학습
- 스플릿키보드
- c++
- mistel키보드
- 창업
- 자료구조
- GraphQL
- 42서울
- schema first
- 스타트업
- 텍스트북
- psql extension
- 도커
- 42seoul
- 파이썬
- 쿠버네티스
- enable_if
- Cloud Spanner
- 어셈블리어
- 부동소수점
- raycasting
- 레이캐스팅
- SFINAE
- 이노베이션아카데미
- 어셈블리
- uuid-ossp
- Today
- Total
written by yechoi
[NestJS] 어드민 패널 설치: AdminBro 본문
nestjs에서 사용할 수 있는 admin panel 패키지는 대표적으로 두가지가 있다. 하나는 nestjs-admin, 또 다른 건 admin bro. 두 가지 모두 설치를 시도해보았고, 결론부터 말하면 adminbro를 사용하기로 했다.
[NestJS] 어드민 패널 설치: nestjs-admin
nestjs에서 사용할 수 있는 admin panel 패키지는 대표적으로 두가지가 있다. 하나는 nestjs-admin, 또 다른 건 admin bro. 두 가지 모두 설치를 시도해보았고, 결론부터 말하면 adminbro를 사용하기로 했다. 이
yechoi.tistory.com
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를 정말 날 것 그대로 확인하고 있어서...