Проверка подлинности на основе файлов cookie через REST API в реагирующем администраторе

Question

Я новичок в реакции-админа.Я уже прочитал все вопросы здесь в stackoverflow, и google'd для моего вопроса тоже, но не нашел никакого полезного решения.

Я настраиваю React-admin, чтобы заменить существующую страницу администратора для одного из моих проектов.Я использую проверку подлинности на основе файлов cookie через REST API.

Можно ли (и если да, то как?) Использовать ее вact-admin?Может ли кто-нибудь, пожалуйста, привести меня в правильном направлении?

Ура!

Answer 1

Можно конечно.Вам просто нужно fetch использовать файлы cookie.

react-admin использует fetch для отправки запросов http на ваш сервер.И fetch не отправляет куки по умолчанию.

Таким образом, чтобы fetch отправлять куки, вы должны добавить опцию credentials: 'include' для каждого fetch вызова приложения.

(если ваш админ и api не находятся в одном домене, вам придется включить CORS на вашем бэкэнде.)

Смотрите документацию react-admin о том, как настроить запросы на dataProvider здесь:https://github.com/marmelab/react-admin/blob/master/docs/Authentication.md#sending-credentials-to-the-api

import { fetchUtils, Admin, Resource } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    const token = localStorage.getItem('token');
    options.headers.set('Authorization', `Bearer ${token}`);
    return fetchUtils.fetchJson(url, options);
}
const dataProvider = simpleRestProvider('http://localhost:3000', httpClient);

const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider}>
        ...
    </Admin>
);

Вы должны будете настроить это так, чтобы добавить options.credentials = 'include' примерно так:

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({
          Accept: 'application/json'
        });
    }
    options.credentials = 'include';
    return fetchUtils.fetchJson(url, options);
}

Вам нужно будет сделать то же самое для authProvider.

что-то вроде

// in src/authProvider.js
export default (type, params) => {
    // called when the user attempts to log in
    if (type === AUTH_LOGIN) {
        const { username, password } = params;
        const request = new Request(`${loginUri}`, {
            method: 'POST',
            body: JSON.stringify({ username: username, password }),
            credentials: 'include',
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });
        return fetch(request)
        .then(response => {
            if (response.status < 200 || response.status >= 300) throw new Error(response.statusText);

            localStorage.setItem('authenticated', true);
        });
    }
    // called when the user clicks on the logout button