담당 도메인
Notice : 공지 게시판은 우리 웹사이트의 핵심 기능 중 하나입니다.
우리 웹사이트의 비회원 및 회원 사용자들은 공지게시판을 통해 새로운 이벤트, 업데이트, 주의사항 등을 확인할 수 있습니다.
세부 목차
클릭하면 해당 부분으로 이동합니다.
공지 게시판의 핵심 :
•
오직 관리자만 공지를 등록, 수정, 삭제할 수 있고, 나머지(판매자,일반)회원은 조회만 할 수 있습니다.
이유 : 승인 받은 관리자가 아닌 일반 회원이나 비회원이, 허위 공지를 올리거나 기존 공지를 조작하게 될 경우 큰 혼란이 발생하기 때문입니다.
•
이를 위해 관리자가 아니면 등록,수정,삭제 버튼이 보이지 않게끔 하는 로직을 짜기로 했습니다.
이제 웹사이트에 직접 접속하여 공지게시판의 주요 기능들을 시연해 보겠습니다.
시연 순서)
비회원 상태로 공지게시판 조회 → 관리자로 로그인 후 공지글 등록, 수정, 삭제
•
주목 포인트
◦
비회원, 일반회원은 공지게시판을 조회만 할 수 있다.
◦
관리자만 공지글을 등록, 수정, 삭제할 수 있다.
이슈 : 공지글을 작성하려고 하는 이 회원이 관리자인지 아닌지를 어떻게 판별할 것인가?
해결 : 정석대로라면 로그인한 회원의 localStorage를 확인했을 때, userInfo에는 토큰 하나만 들어있어야 합니다. 그리고 이 토큰을 이용해서 해당 회원이 관리자인지 아닌지를 판별하는 요청을 보내고 처리해야 합니다.
하지만 시간과 실력이 부족한 관계로, 로그인을 하면 해당 회원의 userInfo에 memberType을 직접 반환하게끔 로그인 메서드를 수정했고, 그 값이 Manager 일 때만 버튼이 보이도록 메서드와 v-if 조건문을 사용해 등록,수정,삭제 버튼에 제한을 걸었습니다.
•
참고 캡쳐
백엔드의 로그인 메서드 로직 부분
로그인 한 사용자의 localStorage — userInfo에 들어있는 memberType 부분
공지 등록, 수정, 삭제 버튼에 제한 걸어놓은 부분
버그 :
•
사용자가 관리자로 로그인 하지 않은 상태에서도 주소창에 직접 url을 입력할 경우,
공지글 등록 페이지(NoticeRegisterView)로 접속이 가능했습니다.
디버그 : router 폴더의 index.js 파일에 beforeEnter를 적용해서 비정상적인 접근을 막고, 해당 페이지에서 새로고침을 하더라도, 여전히 사용자의 로그인여부를 제대로 판별할 수 있도록 고쳤습니다.
•
참고 캡쳐
beforeEnter 네비게이션 가드를 적용한 라우터 경로 부분 캡쳐
beforeEnter 네비게이션 가드의 조건에 들어가는 signInFirst 메서드의 로직
한계 : userInfo에 memberType값을 직접 노출시키는 현행 회원등급 판별 방식은 보안상으로 안전하지 않다는 단점이 있습니다.
개선 계획 : 보안 강화를 위해서 토큰을 사용하여 회원의 등급을 판별하는 로직을 새로 구현하고 현행 방식을 대체할 예정입니다.