как настроить токен при первом входе в систему с помощью axios?

#reactjs #authentication #django-rest-framework #axios #token

#reactjs #аутентификация #django-rest-framework #axios #токен

Вопрос:

В моем приложении React у меня есть

 axios.defaults.headers.common["Authorization"] = `Token ${localStorage.getItem("token")}`;
 

отправлять токен с каждым запросом.

Теперь я пытаюсь впервые войти на сервер Django rest, используя пакет djoser, но получаю этот ответ 401: {"detail":"Invalid token."}

Я думаю, потому что токена еще нет.

Настройки:

 REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 1000,
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ],
    'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',
}
 

Должен ли я что-то сделать на интерфейсе или бэкэнде, и что?

Ответ №1:

Как указано в документации, для входа в систему вы должны достичь конечной точки /auth/token/login/ и предоставить username amp; password для получения нового токена.

что касается Authorization того, что вы могли бы сделать следующим образом:

 const token = localStorage.getItem("token")
axios.defaults.headers.common["Authorization"] = token ? `Token ${token}` : null
 

или с помощью iterceptors:

   axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem("token")
    config.headers.Authorization =  token ? `Token ${token}` : null
    return config;
  });
 

Комментарии:

1. проблема заключалась в том, что мой код отправлял » Authorization: Token null вместо» Authorization: null . Перехватчик работает лучше, чем по умолчанию, потому что он немедленно отправляет токен для автоматического запроса после входа в систему