devjingood 님의 블로그

document.addEventListener('DOMContentLoaded', function() {
    const profileuserId = window.location.pathname.split('/').slice(-2, -1)[0]; // 주소 URL에 있는 userId를 split을 통해 가져온다.

function loadProfile() {
        const access = window.localStorage.getItem('access');  // 저장된 토큰 가져오기
        if (!access) {
            console.error('No access token found');
            return;
        }
        axios.get(`/api/accounts/api/profile/${profileuserId}/`,{
            headers: {
                'Authorization': `Bearer ${access}`  // 인증 토큰을 헤더에 추가
            }
        })
            .then(response => { // .then 메서드를 통해 비동기적으로 Promise를 반환
                const data = response.data;
                document.getElementById('username').textContent = data.username;
                document.getElementById('email').textContent = data.email;
                document.getElementById('nickname').textContent = data.nickname;
                if (data.image) {
                    document.getElementById('profile-picture').src = data.image;
                }
                loadEditProfileButton()
            })
            .catch(error => {
                console.error('Failed to load profile:', error);
            });
        };

    const menuLinks = document.querySelectorAll('.menu a'); // querySelectorAll은 html 요소에서 class 부분을 선택하는 메서드
    // 같은 이름의 모든 class를 다 선택한다.
    menuLinks.forEach(link => { // .forEach는 menuLinks에 포함된 모든 link들을 반복하여 아래 함수를 실행하는 메서드이다.
        link.addEventListener('click', function(event) {
            event.preventDefault();
            menuLinks.forEach(link => link.classList.remove('active')); // 모든 link에서 active 클래스를 제거
            this.classList.add('active'); // this는 이벤트가 발생한 요소를 뜻함, 여기선 클릭된 link 요소에 active 클래스를 추가한다는 의미
        });
    });
    document.getElementById('home-button').addEventListener('click', function() {
        window.location.href = '/api/accounts/api/main/';  // 메인 페이지로 이동
    });

function displayPlaylist(playlists) {
    const container = document.getElementById('zzim-playlist-container');
    container.innerHTML = ''; // HTML 요소의 내용(content)을 설정하거나 가져오는 속성

    playlists.forEach(playlist => {
        const item = document.createElement('div');
        item.className = 'playlist-item'; // HTML 요소의 클래스 속성을 설정하거나 가져오는 속성

        // 이미지 URL이 존재하는지 확인하고 설정
        const imageUrl = playlist.image_url || 'https://via.placeholder.com/150';

        // 콘솔에 playlist 데이터 전체 출력
        console.log(`Playlist Data: ${JSON.stringify(playlist)}`);

        // playlist.id를 고유 식별자로 사용
        const playlistId = playlist.id;
        item.innerHTML = `
            <a href="${playlist.link}" target="_blank">
                <img src="${imageUrl}" alt="${playlist.name}">
                <div class="playlist-info">
                    <h2>${playlist.name}</h2>
                </div> 
            </a>
            <button class="zzim-button" data-id="${playlistId}">♡</button>
        `;
        container.appendChild(item); // 특정 부모 요소에 새로운 자식 요소를 추가하는 메서드
    });

function displayPosts(posts) {
    const postList = document.getElementById('post-container');
    postList.innerHTML = ''; 

    posts.forEach(post => {
        const postElement = document.createElement('div');
        let postImage = post.image ? post.image : window.mainLogoImage;
        postElement.classList.add('post');
        const truncatedContent = post.content.length > 50 
                ? post.content.substring(0, 50) + '...' 
                : post.content;
        postElement.innerHTML = `
            <a href=/api/posts/${post.id}/>
            <img src=${postImage}>
            <div class="content">
                <p id="post-title">${post.title}</p>
                <p id="post-content">${truncatedContent}</p>
                <div class="author-create-like">
                    <p>${post.category}</p>
                    <p>${formatDate(post.created_at).toLocaleString()}</p>
                    <p>좋아요 ${post.like_count}</p>
                </div>
            </div>
            </a>
        `;
        postList.appendChild(postElement);
    });
}

function getCsrfToken() {
    return document.getElementById('csrf-token').value;

 <input type="hidden" id="csrf-token" value="{{ csrf_token }}">

function parseJwt(token) {
    try {
        return JSON.parse(atob(token.split('.')[1])); 
    } catch (e) {  
        return null;
    }
}

// Access token을 새로고침하는 함수
async function refreshAccessToken() { // refreshAccessToken 함수를 async 인자로 주어 비동기로 처리
    const refreshToken = localStorage.getItem('refresh'); // localStorage에 있는 refresh token을 refreshtoken이라는 상수로 선언 / const = 상수, let = 변수
    try {
        const response = await axios.post('/api/accounts/api/token/refresh/', { refresh: refreshToken }); // axios.post를 보내 response를 받아온다.
        const newAccessToken = response.data.access; // newAccessToken에 response로 받아온 새 Access Token을 담는다.
        localStorage.setItem('access', newAccessToken); // setItem은 생성 즉, newAccessToken을 'access'라는 이름으로 localStorage에 담는다.
        return newAccessToken;
    } catch (error) {
        console.error('Error refreshing token:', error);
        // localStorage에 담겨있던 모든 정보들을 초기화 한 후, 재로그인
        localStorage.removeItem('access');
        localStorage.removeItem('refresh');
        localStorage.removeItem('user_id');
        localStorage.removeItem('user_nickname');
        if (window.location.pathname !== '/api/accounts/login/') { // 로그인 페이지에 있지 않다면
            window.location.href = '/api/accounts/login/';
        }
        throw error; // error가 떴을 때, 이 함수를 실행하는 상위 함수를 실행 --> axios.interceptores.request.use가 여기서 해당
    }
}

<!-- base.html -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// Axios 요청 인터셉터를 설정하여 자동으로 토큰을 갱신하는 함수
// interceptors란, 모든 HTTP '요청' 전에 호출해서 실행하는 함수 / 모든 '응답' 전에 호출하는 interceptors.response.use도 있다.
axios.interceptors.request.use(
    async config => { // config는 axios 요청의 설정을 포함하는 객체 (url, headers, method, params, data)
        // 특정 URL을 제외
        // interceptor에서 제외시킨 URL 중에, <int:pk>를 받는 URL들을 정규표현식으로 표현 --> 정규표현식으로 하지 않았을 때, 경로가 명확하지 않아 오류 발생
        const excludedUrls = [
        '/api/accounts/main/',
        '/api/accounts/signup/', 
        '/api/accounts/api/token/', 
        '/api/accounts/login/', 
        '/api/accounts/logout/', 
        '/api/accounts/api/signup/', 
        '/api/playlist/list/', 
        '/api/playlist/data/', 
        '/api/playlist/search/', 
        '/api/playlist/zzim/\\d+',
        '/api/posts/api/list/',
        '/api/posts/list/', 
        '/api/posts/api/\\d+', 
        '/api/posts/\\d+'];
        if (isExcludedUrl(config.url, excludedUrls)) {
            return config; // 제외한 URL을 넣었을 때 true가 나오면, interceptor를 그대로 종료
        }


        let accessToken = localStorage.getItem('access');  // let으로 선언하여 재할당 가능
        const tokenData = parseJwt(accessToken);
        const now = Math.ceil(Date.now() / 1000); // Math.ceil -> JS 내장 함수로 반올림하는 역할, Date.now는 현재 시간을 밀리초로 나타내고, 
        // 밀리초를 1000으로 나누어 초 단위로 변경

        // 토큰이 만료되었는지 확인
        if (tokenData.exp < now) {
            accessToken = await refreshAccessToken();  // 만료된 경우 새 토큰 발급
        }

        config.headers['Authorization'] = 'Bearer ' + accessToken; // config headers 부분 Authorization에 Access Token을 추가
        return config;
    },
    error => {
        return Promise.reject(error); // 'error'를 이유로 즉시 실패하는 'Promise'객체를 생성
    } // async 함수는 명시하지 않아도 항상 Promise 객체를 반환, interceptor에서 오류가 발생할 시, Promise.reject로 반환하여 error를 확인할 수 있도록 함
); // catch가 있다면 async에서 catch로 error 처리를 하기 용이하게 하는 역할이지만, 여기서는 error 자체를 반환하도록 함

// 주어진 URL이 특정 패턴 목록 중 하나와 일치하는지 확인 --> 특정 패턴 = interceptor에서 excludedUrls로 선언한 URL
function isExcludedUrl(url, patterns) {
    return patterns.some(pattern => { // .some은 패턴이 URL과 일치하는지 검사 --> config.url = urls.py에 적힌 모든 url / 일치 시 true
        const regex = new RegExp(pattern.replace(/<int:\w+>/g, '\\d+')); // 모든 <int:...>를 \\d+(숫자 하나 이상)으로 변경
        return regex.test(url); // 변경된 URL이 정규 표현식과 일치하는 지 검사 일치 시 true
    });
}

function checkLoginStatus() { // login이 되 있는 지 확인하는 함수
    const accessToken = localStorage.getItem('access');
    const loginLogoutLink = document.getElementById('login-logout-link');
    const signupProfileLink = document.getElementById('signup-profile-link');
    if (accessToken) {
        loginLogoutLink.textContent = 'Logout';
        loginLogoutLink.style.cursor = 'pointer';
        loginLogoutLink.addEventListener('click', function(e) { // JS에서 addEventListener는 동작(여기서는 'click'을 의미 또다른 예로는 'submit')을 했을 때,
            e.preventDefault(); // e.preventDefault()를 통해 클릭 시 발생하는 기본 동작(폼 제출, 링크 이동 등)을 방지
            logout();
        });
        const userId = localStorage.getItem('user_id');
        signupProfileLink.textContent = 'Profile';
        signupProfileLink.href = `/api/accounts/profile/${userId}/`; // `` JQuery 문법을 이용하여 선언한 값을 문자열로 치환 python의 fstring과 같은 역할
    } else { 
        loginLogoutLink.textContent = 'Login';
        loginLogoutLink.href = '/api/accounts/login/';
        signupProfileLink.textContent = 'Signup';
        signupProfileLink.href = '/api/accounts/signup/';
    }
}

function logout() {
    const refreshToken = localStorage.getItem('refresh');
    const csrfToken = getCsrfToken();
    axios.post('/api/accounts/logout/', { refresh: refreshToken }, {
        headers: {
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => {
        localStorage.removeItem('access');
        localStorage.removeItem('refresh');
        localStorage.removeItem('user_id');
        localStorage.removeItem('user_nickname');
        window.location.href = '/api/accounts/login/';
    })
    .catch(error => {
        console.error('로그아웃 실패.', error);
    });
}

// base.js
function parseJwt(token) {
    try {
        return JSON.parse(atob(token.split('.')[1])); 
    } catch (e) {
        return null;
    }
}

// base.js
async function refreshAccessToken() { 
    const refreshToken = localStorage.getItem('refresh');
    try {
        const response = await axios.post('/api/accounts/api/token/refresh/', { refresh: refreshToken }); 
        localStorage.setItem('access', newAccessToken);
        return newAccessToken;
    } catch (error) {
        console.error('Error refreshing token:', error);
        localStorage.removeItem('access');
        localStorage.removeItem('refresh');
        localStorage.removeItem('user_id');
        localStorage.removeItem('user_nickname');
        if (window.location.pathname !== '/api/accounts/login/') {
            window.location.href = '/api/accounts/login/';
        }
        throw error; 
    }
}

# accounts/urls.py
path("api/token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),

// base.js
axios.interceptors.request.use(
    async config => { 

        const excludedUrls = ['/api/accounts/signup/', 
        '/api/accounts/api/token/', 
        '/api/accounts/login/', 
        '/api/accounts/logout/', 
        '/api/accounts/api/signup/', 
        '/api/playlist/', 
        '/api/playlist/data/', 
        '/api/playlist/search/', 
        '/api/playlist/zzim/<int:playlist_id>/',
        '/api/posts/',
        '/api/posts/list/', 
        '/api/posts/api/<int:post_id>', 
        '/api/posts/<int:post_id>'];
        if (excludedUrls.some(url => config.url.includes(url))) { 
            return config;
        }

        let accessToken = localStorage.getItem('access');  
        const tokenData = parseJwt(accessToken);
        const now = Math.ceil(Date.now() / 1000);



        if (tokenData.exp < now) { 
            accessToken = await refreshAccessToken();

        config.headers['Authorization'] = 'Bearer ' + accessToken;  
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

# accounts/urls.py
path('login/', views.LoginPageView.as_view(), name="login"),
path('api/token/', views.CustomTokenObtainPairView.as_view(), name="token_obtain"),
path("api/token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
path('logout/', views.LogoutAPIView.as_view(), name='logout'),

# accounts/views.py
class CustomTokenObtainPairView(TokenObtainPairView):
    serializer_class = CustomTokenObtainPairSerializer

class LogoutAPIView(APIView):
    permission_classes = [AllowAny]

    def post(self, request):
        try:
            refresh_token = request.data['refresh']
            token = RefreshToken(refresh_token)
            token.blacklist()

        except Exception as e:
            print(f"Exception: {e}")  # 예외 메시지 출력
        return Response(status=status.HTTP_205_RESET_CONTENT)

# accounts/serializers.py
class CustomTokenObtainPairSerializer(TokenObtainPairSerializer):

    @classmethod
    def get_token(cls, user):
        token = super().get_token(user)
        token["user_id"] = user.id
        token["user_nickname"] = user.nickname
        return token

    def validate(self, attrs):
        data = super().validate(attrs)
        data["user_id"] = self.user.id
        data["user_nickname"] = self.user.nickname
        return data

// accounts/login.js
document.getElementById('login-form').addEventListener('submit', function(e) {
    e.preventDefault();

    // CSRF 토큰을 가져옵니다.
    const csrfToken = getCsrfToken();

    axios.post('/api/accounts/api/token/', {
        username: document.getElementById('username').value,
        password: document.getElementById('password').value
    }, {
        headers: {
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => {
        localStorage.setItem('access', response.data.access);
        localStorage.setItem('refresh', response.data.refresh);
        localStorage.setItem('user_id', response.data.user_id);
        localStorage.setItem('user_nickname', response.data.user_nickname);
        window.location.href = '/api/accounts/main/'
    })
    .catch(error => {
        console.error('로그인 실패.', error);
    });
});

// base.js
function logout() {
    const refreshToken = localStorage.getItem('refresh');
    const csrfToken = getCsrfToken();
    axios.post('/api/accounts/logout/', { refresh: refreshToken }, {
        headers: {
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => {
        localStorage.removeItem('access');
        localStorage.removeItem('refresh');
        localStorage.removeItem('user_id');
        localStorage.removeItem('user_nickname');
        window.location.href = '/api/accounts/login/';
    })
    .catch(error => {
        console.error('로그아웃 실패.', error);
    });
}

# accounts/views.py LogoutAPIView(APIView) def post
refresh_token = request.data['refresh']
            token = RefreshToken(refresh_token)
            token.blacklist()