Как получить аутентифицированный токен внутри уже авторизованной страницы - PullRequest
Новая
       5

Как получить аутентифицированный токен внутри уже авторизованной страницы

0 голосов
/ 06 июня 2018

Я новичок в React.Я уже настроил веб-сервис небольшого размера с бэкэндом Django на AWS EB.У него есть пользовательская модель.И большинство содержимого доступно после того, как пользователь вошел в систему. Он работает нормально.

Когда я начинаю создавать мобильное приложение с React Native, я настраиваю Django Rest в то же место с совместным использованием одних и тех же моделей БД с веб-сервисом.Я выбрал способ аутентификации токена.Он прекрасно работает с приложением React Native на мобильном телефоне.После входа пользователей в мобильное приложение API возвращает токен авторизации.После получения токена от API мобильное приложение взаимодействует с API, включая токен в заголовке JSON.

Во время изучения и разработки мобильного приложения React Native.Мне это очень понравилось.Итак, я хочу поместить небольшое приложение реакции на одну из моих веб-страниц, а не писать целое одностраничное приложение.На этом этапе мне пришла в голову одна проблема: как мое реагирующее приложение получает токен без повторного ввода идентификатора пользователя и пароля.

Я потратил часы, чтобы найти какой-либо ключ к поиску, но не смог.Кто-нибудь может дать мне подсказку?Как реагирует приложение внутри уже зарегистрированной веб-страницы на API, основанный на аутентификации токена, без повторного входа в систему?

Ответы [ 5 ]

0 голосов
/ 10 мая 2019

Реагируйте, что вы можете использовать любой libray для вызывающего API, ex-axios является одним из них.При первом входе в систему сохраните этот токен в локальном хранилище или сеансе.

Теперь мы должны добавить этот токен в заголовок, чтобы вы могли использовать перехватчик, т.е. когда мы выполняем вызов API каждый раз, когда перехватчик получит вызов, в этом месте вы можете получить токен из локального хранилища или добавления сеанса.заголовок запроса.

ниже приведен пример кода перехватчика.

import axios from 'axios';
import cookie from 'react-cookies';
import * as utils from './utils';


let axios_instance = axios.create();

axios_instance.interceptors.request.use(
  (configuration) => {
    const config = configuration;
    const authToken = cookie.load('authToken');
    if (authToken) {
      config.headers.Authorization = `Token ${authToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

axios_instance.interceptors.response.use((response) => {
  return response;
}, (error) => {

  if (error.response.status == 401) {
    utils.clearCookie();
    window.location.href = '/login';
    return;
  }
  if (error.response.status == 403) {
    utils.clearCookie();
    window.location.href = '/login';
    return;
  }

  if (error.response.status == 404) {
    // window.location.href = '/not-found';
    return;
  }

  if (error.response.status == 500) {
    // window.location.href = '/server-error';
    return;
  }

  return Promise.reject(error);

});

export default axios_instance;
0 голосов
/ 10 июня 2018

Я бы хотел оставить свой ответ после того, как решил свои долгие исследования и учебу.Мое решение довольно простое.1. установить активацию аутентификации сеанса DRF.Добавление некоторого кода в setting.py 

REST_FRAMEWORK = {
# ...
'DEFAULT_AUTHENTICATION_CLASSES': (
    'rest_framework.authentication.TokenAuthentication',
    'rest_framework.authentication.SessionAuthentication',
    ),
}

2.добавьте 'credentials: "include"' в код извлечения, чтобы использовать уже авторизованный cookie сеанса для аутентификации. 

await fetch(API_URL, {
    credentials: "include"
})

это решение решило мою проблему.

0 голосов
/ 06 июня 2018

Вы можете использовать localStorage для установки и получения токена

ex:

set -> localStorage.setItem('token', 'dac43hh5r3nd23i4hrwe3i2un32u');

get -> localStorage.getItem('token');

0 голосов
/ 06 июня 2018

Для ReactJS, посмотрите на Где хранить токен .Вы можете использовать localStorage или куки.

Использование куки: 

document.cookie = cookie_name + "=" + value + ";expires=" + expire_date + ";";

PS: Дата истечения срока действия должна быть в формате GMT.

Использование localStorage: 

// To set the token
localStorage.setItem('token', 'dac43hh5r3nd23i4hrwe3i2un32u');

// To get the token
localStorage.getItem('token');

Документы Django для сессии , и прочитайте этот вопрос , это поможет вам.

Cookie или localStorage?

Я бы взял куки.Зачем?Потому что вы можете установить срок действия (например, для автоматического удаления), домен, путь и другие вещи, которые могут быть полезны.На локальном хранилище вы просто храните информацию.

0 голосов
/ 06 июня 2018

Я думаю, вы можете использовать cookies или localStorage для сохранения вашего токена , а затем в ответной части просто получить этот токен оттуда.

...