Как использовать localStorage на стороне клиента nextJS
Я получаю сообщение об ошибке при попытке получить данные из локального хранилища. Я использую директиву use client вверху, но проблема все равно остается.
'use client';
const baseURL = 'https://localhost:7264';
const accessToken = localStorage.getItem('accessToken');
export async function GET(url, claim) {
try {
const res = await fetch(`${baseURL + url}`, {
method: 'GET',
headers: {
accessToken: accessToken,
clientClaim: claim
},
});
if (res.ok) {
const data = res.json();
return data;
}
return null;
} catch (error) {
console.info(error);
return null;
}
}
Кто-нибудь поможет мне, как я могу использовать localStorage в nextJS, особенно в следующем 14?
Проблема в том, что вы пытаетесь получить localStorage, хотя на данный момент значение не определено. Один из способов исправить это - добавить useEffect внутри компонента - это гарантирует, что внешний интерфейс уже отрисован, что означает, что вы можете получить доступ к localStorage... вам также понадобится useState для хранения токена и еще один useEffect для запуска запрос.
localStorage не определен
То, как вы составляете файл, предполагает, что это обработчик маршрута. Его нельзя запустить на клиенте, он выполняется на сервере, поэтому у него нет доступа к локальному хранилищу. Использование клиента использования в файле маршрутизатора ничего не дает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я предполагаю, что вы пытаетесь определить обработчик маршрута из-за имени (GET) экспортируемой функции и того, что она делает.
Во-первых, обработчик маршрута не может иметь директиву 'use client', поскольку он не является компонентом React. Эта директива используется исключительно для того, чтобы пометить определенные компоненты как клиентские, а не как серверные.
Во-вторых, ваш обработчик маршрута имеет неправильные параметры. Ваш обработчик ожидает параметр запроса , а вы передаете url и claim отдельно.
В-третьих, поскольку вы пытаетесь представить это как маршрут API, нет смысла пытаться получить доступ localStorage сюда, чтобы получить ключ доступа. Это должно быть передано от клиента через HTTP-заголовок в запросе. Сервер может получить к этому доступ через параметр запроса.
В-четвертых, при использовании API fetch метод response.json() возвращает Promise, который вы возвращаете напрямую, а не ожидаете его.
В-пятых, обработчики маршрутов ожидают, что вы вернете объект Response, а не непосредственно объект JSON.
Учитывая все эти моменты, ваш обработчик должен выглядеть примерно так:
const baseURL = 'https://localhost:7264';
export async function GET(request) {
const url = request.nextUrl.searchParams.get('url')
const accessToken = request.headers.get('accessToken')
const claim = request.headers.get('clientClaim')
try {
const res = await fetch(`${baseURL + url}`, {
method: 'GET',
headers: {
accessToken: accessToken,
clientClaim: claim
},
});
if (res.ok) {
const data = await res.json();
return Response.json(data);
}
return Response.json(null, { status: 500 });
} catch (error) {
console.info(error);
return Response.json(null, { status: 500 });
}
}
С помощью этого обработчика ваш клиент должен использовать его, передавая url в качестве параметра поиска , а также токен доступа и утверждение в качестве заголовков accessToken и clientClaim соответственно.
В чем именно заключается ошибка?