Механизм обновления токена javascript ⇐ Javascript

[Anonymous]

Мое приложение полностью полагается на вызовы API Spotify.

Поскольку это происходит только на стороне клиента, для меня было бы небезопасно использовать логику токена обновления, которую предлагает Spotify, и поэтому я пытаюсь реализовать другой механизм, который заключается в вызове handleAuthorization каждый раз, когда токен приближается. истечет, чтобы пользователь прошел повторную аутентификацию и получил новый токен.

import React, { useEffect, useState } из 'реагировать'; import {Route, Routes} из 'реагировать-маршрутизатор-дом'; импортировать LandingPage из «./comComponents/LandingPage»; импортировать UserDashboard из './comComponents/UserDashboard'; импортировать PlaylistPage из './comComponents/PlaylistPage'; импортировать ConnectionError из './компоненты/ConnectionError'; импортировать 'реагировать-notifications/lib/notifications.css'; импортировать аксиомы из «аксиом»; функция Приложение() { const [токен, setToken] = useState(''); const [профиль, setProfile] = useState({}); const [списки воспроизведения, setPlaylists] = useState([]); const [isOnline, setIsOnline] = useState(true); useEffect(() => { const handleOnlineStatusChange = () => { setIsOnline(window.navigator.onLine); }; window.addEventListener('online', handleOnlineStatusChange); window.addEventListener('оффлайн', handleOnlineStatusChange); возврат () => { window.removeEventListener('online', handleOnlineStatusChange); window.removeEventListener('оффлайн', handleOnlineStatusChange); }; }, []); const handleAuthorization = () => { const clientId = 'мой-клиент-id'; const redirectUri = 'http://localhost:3000'; constscopes = ['user-library-read', 'playlist-read-private', 'playlist-modify-private', 'playlist-modify-public', 'playlist-read-collaborative']; const авторизацияURL = `https://accounts.spotify.com/authorize? ... IComponent( перенаправлениеUri )}&scope=${scopes.join('%20')}`; // Перенаправление для авторизации window.location.href = URL-адрес авторизации; }; const fetchData = асинхронный () => { константный хэш = window.location.hash; const tokenParam = новый URLSearchParams(hash.substring(1)).get('access_token'); если (токенПарам) { // Токен присутствует в URL const newToken = tokenParam; window.localStorage.setItem('токен', newToken); setToken(новыйТокен); // Перенаправление на панель управления window.location.href = '/dashboard'; } еще { // Токен отсутствует в URL-адресе, здесь обрабатывается срок действия токена или другая логика const сохраненныйToken = window.localStorage.getItem('токен'); если (storedToken) { // Токен хранится локально, вы можете его установить и выполнить необходимые действия setToken (хранимый токен); // Извлекаем сюда пользовательские данные и плейлисты пытаться { const ответ = ожидайте axios.get('https://api.spotify.com/v1/me', { заголовки: { Авторизация: `Носитель ${storedToken}`, }, }); const {данные} = ответ; установитьПрофиль (данные); // Получение плейлистов пытаться { const playlistsResponse = await axios.get('https://api.spotify.com/v1/me/playlists', { заголовки: { Авторизация: `Носитель ${storedToken}`, }, параметры: { лимит: 50, }, }); const {данные: playlistsData } = playlistsResponse; setPlaylists(playlistsData.items); console.log(playlistsData.items); } поймать (ошибка) { console.error('Ошибка при получении плейлистов:', error); } } поймать (ошибка) { console.error('Ошибка получения пользовательских данных:', error); } } } }; const checkTokenExpiration = () => { const сохраненныйToken = window.localStorage.getItem('токен'); если (storedToken) { const tokenData = JSON.parse(atob(storedToken.split('.')[1])); // Декодируем полезную нагрузку JWT // Вычисляем оставшееся время до истечения срока действия токена (в секундах) const currentTime = Math.floor(Date.now()/1000); const expirationTime = tokenData.exp; const timeToExpiration = ExpirationTime - currentTime; // Устанавливаем порог (например, 300 секунд) для обновления токена константный токенRefreshThreshold = 300; если (timeToExpiration { // Проверяем срок действия токена каждую минуту const tokenExpirationCheckInterval = setInterval(() => { проверкаTokenExpiration(); выборка данных(); }, 60000); // 60 секунд возврат () => { ClearInterval (токенExpirationCheckInterval); }; }, []); const выход = () => { setToken(''); установитьПрофиль({}); setPlaylists([]); window.localStorage.removeItem('токен'); // Перенаправляем пользователя на домашнюю страницу после выхода из системы window.location.assign('http://localhost:3000'); }; возвращаться ( {В сети ? ( ) : ( )} ); } экспортировать приложение по умолчанию; В целях отладки я установил таймер для вызова функции каждую минуту, но код не работает, и я получаю следующую ошибку: «Неперехваченное исключение DOMException: не удалось выполнить «querySelector» в «Документе». Как я могу это исправить?