프로필 html로 구현 이게 트러블 슈팅이 맞나?

class ProfilePageView(TemplateView):
    template_name = "accounts/profile.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['user_id'] = kwargs["pk"] # 현재 로그인한 사용자의 ID를 컨텍스트에 추가
        return context

get_context_data = pk값을 줌

axios.get 헤더에 가져옴

class ProfileView(APIView):
    permission_classes = [IsAuthenticated]

    # 프로필 보기
    def get(self, request, username):
        user = get_object_or_404(User, username=username)
        serializer = SignupSerializer(user)
        return Response(serializer.data, status=status.HTTP_200_OK)

이걸로 html/ Axios , JS이용해 홈페이지에 구현 할려했었다
하지만 로그인 / 로그아웃 을 해도 DB에서 ID값을 못가져 옴

처음에는 ID값을 못가져오는건지 몰라서

class SignUpPageView(TemplateView):
    template_name = "accounts/signup.html"

추가를 하고 문제가 없어 보였는데
여전히 ID값을 찾지 못하고 개발자 설정에서 확인 하니 404found 뜸

여기서 시도해본게 urls.py 주소 변경 html에 axios 수정까지 했는데 안됨
결국 저기 두군데는 문제가 없다 views에서 오류 찾기 시작

class ProfileView(APIView):
    permission_classes = [IsAuthenticated]

    # 프로필 보기
    def get(self, request, pk):
        user = get_object_or_404(User, pk=pk)
        serializer = SignupSerializer(user)
        return Response(serializer.data, status=status.HTTP_200_OK)


class ProfilePageView(TemplateView):
    template_name = "accounts/profile.html"

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['user_id'] = kwargs["pk"] # 현재 로그인한 사용자의 ID를 컨텍스트에 추가
        return context

여기서 해결한 방법 일단 토큰을 인증 하는 키를 없애본다
permission_classes = [IsAuthenticated]

없애고 실행을 해보니 지금 까지 안나왔던 ID값이 나왔다
그리고 토큰 처리를 백에서 해야함

그래도 ID값은 나오기 시작해서 HTML에서 저장된 토큰을 가져오기로함 그래서 해결된 HTML

{% extends "base.html" %}

{% block content %}
<div id="profile-container">
    <h1>Profile</h1>
    <p><strong>Username:</strong> <span id="username"></span></p>
    <p><strong>Email:</strong> <span id="email"></span></p>
    <p><strong>NickName:</strong> <span id="nickname"></span></p>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const userId = '{{ user_id }}';  // 템플릿 태그를 사용해 현재 로그인한 유저의 ID를 가져옴
        console.log(userId)
        function loadProfile() {
            const token = localStorage.getItem('access_token');  // 저장된 토큰 가져오기
            if (!token) {
                console.error('No access token found');
                return;
            }
            axios.get(`/api/accounts/api/profile/${userId}/`{
                headers: {
                    'Authorization': `Bearer ${token}`  // 인증 토큰을 헤더에 추가
                }
            })
                .then(response => {
                    const data = response.data;
                    document.getElementById('username').textContent = data.username;
                    document.getElementById('email').textContent = data.email;
                    document.getElementById('nickname').textContent = data.nickname;
                })
                .catch(error => {
                    console.error('Failed to load profile:', error);
                });
        }

        loadProfile();

    });
</script>
{% endblock content %}

이러니까 ID값은 가져옴 근데 중괄호가 안닫혀있다고 에러가 남
그리고 이부분 |axios.get(`/api/accounts/api/profile/${userId}/`,|에 쉼표를 넣어서 해결이 됨

 axios.get(`/api/accounts/api/profile/${userId}/`,{
                headers: {
                    'Authorization': `Bearer ${token}`  // 인증 토큰을 헤더에 추가
                }
            })

결과 : 로그아웃 상태에서는 프로필 확인 불가 / 로그인 상태에서는 프로필 확인 가능

늦은 시간까지 도와주신 분들에게 감사를 표합니다