react admin 在 CRUD 操作时返回 Unauthorized 401 错误答案

【问题标题】：react admin returns Unauthorized 401 error upon CRUD operationsreact admin 在 CRUD 操作时返回 Unauthorized 401 错误
【发布时间】：2021-05-02 11:25:29
【问题描述】：

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

我已经为 react admin 编写了自己的 authProvider.js 和 dataProvider.js。 authProvider.js 的 login 和 checkAuth 函数如下所示

// 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 }),
                    headers: new Headers({ 'Content-Type': 'application/json' }),
                });

                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

【问题讨论】：

访问令牌需要作为授权标头添加到请求中，例如Authorization: Bearer <token value>。当您发送请求时，您有什么可做的吗？
@ShauntheSheep 感谢您的宝贵时间。我为我的dataProvider 代码引用了this 文件。我的看起来像this。我似乎确实错过了在每个请求上添加授权标头的部分。

标签： reactjs jwt react-admin

【解决方案1】：

您需要修改 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>
);

【讨论】：