反应管理员在 CRUD 操作时返回未经授权的 401 错误

如何解决反应管理员在 CRUD 操作时返回未经授权的 401 错误

我正在做一个 react-admin 项目。后端是使用在 docker 容器上运行的 Django rest 框架编写的。访问令牌和刷新令牌的身份验证端点使用 djangorestframework-simplejwt 编写，并分别在 http://localhost:8000/api/token/ 和 http://localhost:8000/api/token/refresh/ 处提供。

我为 React 管理员编写了自己的 authProvider.js 和 dataProvider.js。 login 的 checkAuth 和 authProvider.js 函数如下所示

// in src/authProvider.js
import jwt from "jsonwebtoken";

export default {
    login: async ({ username,password }) => {
        const request = new Request('http://localhost:8000/api/token/',{
            method: 'POST',body: JSON.stringify({ username,password }),headers: new Headers({ 'Content-Type': 'application/json' }),});

        const response = await fetch(request);
        if (response.status < 200 || response.status >= 300) {
            throw new Error(response.statusText);
        }

        const { refresh,access } = await response.json();
        localStorage.setItem('refreshToken',refresh);
        localStorage.setItem('accesstoken',access);
    },logout: ...

    checkAuth: async () => {
        const accesstoken = localStorage.getItem('accesstoken');
        const refreshToken = localStorage.getItem('refreshToken');

        if (accesstoken && refreshToken) {
            const { exp } = await jwt.decode(accesstoken);
            if (exp > (new Date().getTime() / 1000) - 10) {
                return Promise.resolve();
            } else {
                const request = new Request('http://localhost:8000/api/token/refresh/',{
                    method: 'POST',body: JSON.stringify({ "refresh": refreshToken }),});

                const response = await fetch(request)
                .then(response => {
                    if (response.status !== 200) {
                        throw new Error(response.statusText);
                    }
                    return response.json();
                })
                .then(({ token }) => {
                    localStorage.setItem('accesstoken',token);
                    return Promise.resolve();
                });

                return response;
            }
        }
        return Promise.reject();
    },checkerror: ...

    getPermissions: () => Promise.resolve(),}

检索数据工作正常。但是每当我执行创建、编辑和删除操作时，我都会自动退出并显示 401 Unauthorized 错误。来自 docker 服务器日志的错误消息

Unauthorized: /api/products/2
"PUT /api/products/2 HTTP/1.1" 401

来自浏览器控制台的错误：PUT HTTP://localhost:8000/api/products/2 401 (Unauthorized)

在添加 authProvider 并使用 docker 容器作为后端之前，CRUD 数据突变运行良好，使用本地 python venv 作为后端。所以我认为 dataProvider.js 在这里不负责。

我已经有一段时间无法弄清楚了。谁能帮我弄清楚我在这里可能做错了什么？感谢您抽出宝贵时间。

编辑 1：在 API 请求期间，似乎没有从前端发送访问令牌，因此服务器返回 401 Unauthorized

解决方法

您需要修改 dataProvider 以包含令牌（在令牌、cookie 或 GET 参数中，具体取决于您的后端要求）。这在 the react-admin auth documentation 中有解释：

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 } = JSON.parse(localStorage.getItem('auth'));
    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>
);