sinlay
735
2019-10-07 15:42:01
7
720

VUE(CSR) 에서 스프링부트 시큐리티 로그인 인증 방법


안녕하세요


VUE 와 스프링부트로

Front / Back End 를 나누려고 합니다.

근데, VUE 를 SPA로 개발할 경우, 페이지를 이미 가지고 있어


ROLE_USER 권한임에도 URL 을 admin/** 로 하면 ADMIN 페이지가 보여질텐데요

이 부분을 어떡해 설계해야하는것인가요?


구글에 찾아보면 다들 '다음 포스트에서 보겠습니다' 하고 다음포스트가 없어요 ㅠㅠ

0
  • 답변 7

  • vicodin
    143
    2019-10-07 16:00:11
    VUE를 잘몰라서 조심스럽긴한데 ADMIN페이지가 보여진다는게 데이터도 불러온단 소리는 아닐거고 서버단안가고 화면만 불러오는게 가능은 하다는거면 그냥 VUE에서 스크립트로 체크를 이중으로 하면 되지않나요?
  • 제주감자
    22
    2019-10-07 16:19:47
  • sinlay
    735
    2019-10-07 16:24:30

    @vicodin

    스크립트로 체크한다는건 페이지가 보여지고, 스크립트에서 서버와 통신해서 체크하란 뜻인가요?

  • sinlay
    735
    2019-10-07 16:34:37

    @제주감자

    감사합니다.

    로그인시 role 을 스토어에 저장하고 

    router 이동시 그 정보를 체크하는 방식인가요?

  • vicodin
    143
    2019-10-07 16:35:43

    서버와 통신하란 이야기는 아니었고 처음 인증할떄 권한값을 받아와서 라우터나 해당페이지에서 체크하는게 좋을거같다는 이야기였습니다. 전역상수같은걸로 값을 가지고 클라이언트단에서 체크를 하는거죠.

    질문이 단순히 서버단 데이터요청처리는 권한체크를 하는데 화면단에서 SPA라 페이지이동은 되어버린다고 하시는거면요.

  • 컴포지트
    1k
    2019-10-07 17:49:24 작성 2019-10-07 17:50:34 수정됨

    role 체크는 초기 한 번만 하면 됩니다. 제가 제주감자님 소스로 비슷한 환경으로 실제 프로젝트 투입 중인데, role 정보를 초기에 로그인 정보와 같이 store 에 저장 후 라우터에서는 로그인 체크만 합니다.

    권한 체크는 매 접근 시 굳이 할 필요가 없는 게, router 에서 처음부터 role 별로 걸러내는 소스를 볼 수 있습니다. 즉, 이후에는 로그인만 체크하고 로그인만 유효하면 필터링된 라우팅 정보로 접근한다는 거죠.

    저는 이를 활용해서 서버단에서 걸러내는 로직을 구현했습니다. 물론 전체 라우팅 정보는 vue에 어쩔 수 없이 존재해야 합니다. 전체에서 필터링을 거는 식이니까요. 어자피 라우팅 데이터가 import 구문 때문에 Webpack 트랜스코딩 데이터이다 보니 분석도 어렵고, 악의적 사용자가 어렵게 억지로 접근한다 해도 API에서 로그인 체크만 해도 안전하게 앱을 구성할 수 있습니다.

  • 제주감자
    22
    2019-10-08 17:49:38

    @컴포지트 @sinaly

    저도 컴포지트님이 말씀하신대로 구현했습니다.

    위에 깃헙 코드도 컴포지트님이 말씀하신 대로 입니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.