인프런 커뮤니티 질문&답변
작성한 질문수
jsp, 타임리프 둘다 안쓸때 프론트에서 스프링 시큐리티를 어떻게 쓰나요?
작성
·
251
0
<sec:authorize="isAnonymous()">
<button onclick="location.href='/login/login'">로그인</button>
<button onclick="location.href='/login/register'">회원가입</button>
</sec:authorize>
<sec:authorize="isAuthenticated()">
<button onclick="location.href='/login/myPage'">마이페이지</button>
<button onclick="location.href='/login/logout'">로그아웃</button>
</sec:authorize>
jsp나 타임리프 둘다 안쓰고싶은데 순수 html에선 이렇게 쓰면 4개가 다 나와서 곤란한 상황입니다. 어떻게해야 회원이랑 비회원이랑 서로 다른 화면을 보여주게 할수있나요? 찾아봐도 타임리프를 쓰던지 jsp를 쓰던지 하라고만 나와서 질문드립니다
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
JSP나 타임리프 외에 순수 HTML에서 Spring Security를 이용하여 인증 상태에 따라 다른 화면을 보여주는 방법에 대해 궁금하신 것 같습니다. 순수 HTML에서 서버 측의 인증 상태에 따라 다르게 정보를 표시하는 직접적인 방법은 없습니다. HTML은 정적인 파일이기 때문에, 사용자의 인증 상태를 동적으로 확인하고 조건에 따라 내용을 변경하는 처리를 클라이언트 사이드에서 수행할 수 없습니다. 그러나 몇 가지 방법을 통해 비슷한 기능을 구현할 수 있습니다.
AJAX와 서버 사이드 API 활용: 클라이언트 측 JavaScript를 사용하여 서버에 사용자의 인증 상태를 확인하는 API 요청을 보냅니다. 서버는 해당 사용자의 인증 상태(로그인 여부 등)를 응답으로 반환합니다. 이를 통해 클라이언트에서는 동적으로 해당 정보를 바탕으로 화면을 변경할 수 있습니다.
서버 사이드에서 페이지 미리 처리: 사용자의 요청을 받은 서버 사이드에서 사용자의 인증 상태에 따라 필요한 정보를 페이지에 미리 삽입하여 응답을 보냅니다. 이 경우 순수 HTML만으로는 불가능하기 때문에 서버 사이드 템플릿 엔진을 사용하거나, 서버에서 직접 HTML 문자열을 생성하는 등의 처리가 필요합니다.
클라이언트 사이드 라우팅 및 상태 관리 라이브러리 활용: 예를 들어 React, Angular, Vue.js와 같은 프론트엔드 프레임워크를 사용하면, 클라이언트 사이드에서 라우팅 처리와 상태 관리를 통해 사용자의 인증 상태에 따라 다른 뷰를 보여줄 수 있습니다. 이 경우 서버로부터 사용자의 인증 상태를 받아 클라이언트 사이드에서 처리할 수 있어야 합니다.
단순히 순수 HTML에서 Spring Security 태그를 사용하는 것과 같은 방식으로는 서버 측의 로직을 클라이언트에서 직접 제어할 수 없기 때문에 위와 같은 접근 방법을 고려해볼 수 있습니다.