React rest-hooks как аутентификация
Я пытаюсь создать часть аутентификации своего внешнего интерфейса, чтобы он мог взаимодействовать с DRF API. Я решил также использовать хуки для отдыха для извлечения и отправки данных из / в API.
Я читаю Документация по аутентификации rest-hooks как руководство, но не могу найти «правильный способ» реализовать его в моем проекте. Все, что я прочитал до сих пор, использует ресурсы для получения и отправки данных в API.
В бэкэнде у меня есть конечная точка /api-auth, которая после отправки параметров username и password возвращает токен для использования в качестве заголовка при выборке, я думаю, это «легкая» часть.
Несмотря на то, что я пытаюсь понять документацию по перехватчикам отдыха, я не могу понять, как это объединить, используя DRF API + перехватчики.
И плюс, помимо всего, что я сказал выше, я все равно пробовал это, и не работает ...
Попытки
Я создал этот AuthResource, чтобы прикрепить его к форме входа в систему.
С подходом fetch:
import { Resource } from '@rest-hooks/rest';
import { API_URL } from '../utils/server';
export default class AuthResource extends Resource {
static getFetchInit = (init: RequestInit) => ({
...init,
credentials: 'same-origin'
});
}
Ошибка:
Class static side 'typeof AuthResource' incorrectly extends base class static side 'typeof Resource'.
The types of 'getFetchInit(...).credentials' are incompatible between these types.
Type 'string' is not assignable to type 'RequestCredentials | undefined'.
- При втором подходе
С подходом superagent:
import { Request } from 'rest-hooks';
class AuthdResource extends Resource {
static fetchPlugin = (request: Request) => request.withCredentials();
}
Он не может найти Request внутри модуля rest-hooks.
это не безумие, может быть, если вы прочитаете вопрос, вы также сможете прочитать, что я спрашиваю, каков правильный метод аутентификации. А pk() я не реализовал по вышеуказанной причине.
Такое ощущение, что вы нападаете на меня, чего я не понимаю, потому что я не атакую вас, я атакую авторов этого пакета! Могу исправить ошибку подхода fetch. Я напишу тебе ответ. Я не могу исправить подход superagent, потому что нет Request, экспортированного из rest-hooks.
Мех, это было похоже на атаку, говорящую, что я скопировал код и даже с ошибками. Но я сделал это, просто пытаясь «пролить свет» (на себя).
Прошу прощения, если получилось неправильно. Я имел в виду, что вы скопировали их прямо из документации, поэтому я знаю, что вы не делаете ничего плохого и ничего не напортачили, потому что это именно то, что говорят документы (честно говоря, я не знаком с этим упаковка).
Ответы 1
Type 'string' is not assignable to type 'RequestCredentials | undefined'.
Typescript предполагает, что тип возвращаемого значения getFetchInit имеет свойство { credentials: string }, потому что он видит 'same-origin' как просто string. Ожидаемый тип возврата RequestInit допускает только определенные литеральные строки в типе объединения RequestCredentials. 'same-origin' - одна из таких строк, так что со значением все в порядке. Нам просто нужно, чтобы Typescript интерпретировал его более конкретно, чем string.
Один из способов сделать это - использовать Утверждение as const, что означает, что возвращаемый тип включает буквальное значение строки { credentials: 'same-origin' }.
credentials: 'same-origin' as const
Другой способ (который мне больше нравится) - аннотировать тип возвращаемого значения для метода getFetchInit, а не допускать его вывода. Мы хотим, чтобы он возвращал объект RequestInit.
export class AuthResource extends Resource {
static getFetchInit = (init: RequestInit): RequestInit => ({
...init,
credentials: 'same-origin'
});
pk(parent?: any, key?: string | undefined): string | undefined {
return;
}
}
Это исправляет подход fetch. Подход superagent я не могу исправить, потому что я получаю ту же ошибку, что и вы, что Request не экспортируется из rest-hooks. Я не знаю, откуда должен поступать этот импорт, потому что вы делаете именно то, что сказано в документации, и это не работает.
Это безумие, что эти коды копируются прямиком из документации и в них есть ошибки! Но я тоже вижу ошибки. На самом деле я получаю дополнительную ошибку в обеих настройках, потому что классы расширяют
Resource, который расширяетSimpleResource, который расширяетEntity, который имеет методabstractpk(parent?: any, key?: string): string | undefined;, который нигде не реализован.