React-Admin header 中的 JWT 令牌

Question

我正在测试 React-Admin https://github.com/marmelab/react-admin 和 restful API https://github.com/hagopj13/node-express-mongoose-boilerplate

我想列出数据库中的用户，但出现错误：

GET http://localhost:4000/v1/users?filter=%7B%7D&range=%5B0%2C24%5D&sort=%5B%22createdAt%22%2C%22desc%22%5D 401 (Unauthorized)

这里是数据提供者：

import { fetchUtils } from "react-admin";
import { stringify } from "query-string";

const apiUrl = "http://localhost:4000/v1";
const httpClient = fetchUtils.fetchJson;

export default {
  getList: (resource, params) => {
    console.log(params.pagination);
    console.log(params.sort);
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const query = {
      sort: JSON.stringify([field, order]),
      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
      filter: JSON.stringify(params.filter)
    };
    const url = `${apiUrl}/${resource}?${stringify(query)}`;

    return httpClient(url).then(({ headers, json }) => ({
      data: json,
      total: parseInt(
        headers
          .get("content-range")
          .split("/")
          .pop(),
        10
      )
    }));
  },

  getOne: (resource, params) =>
    httpClient(`${apiUrl}/${resource}/${params.id}`).then(({ json }) => ({
      data: json
    })),

  getMany: (resource, params) => {
    const query = {
      filter: JSON.stringify({ id: params.ids })
    };
    const url = `${apiUrl}/${resource}?${stringify(query)}`;
    return httpClient(url).then(({ json }) => ({ data: json }));
  },

  getManyReference: (resource, params) => {
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const query = {
      sort: JSON.stringify([field, order]),
      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
      filter: JSON.stringify({
        ...params.filter,
        [params.target]: params.id
      })
    };
    const url = `${apiUrl}/${resource}?${stringify(query)}`;

    return httpClient(url).then(({ headers, json }) => ({
      data: json,
      total: parseInt(
        headers
          .get("content-range")
          .split("/")
          .pop(),
        10
      )
    }));
  },

  update: (resource, params) =>
    httpClient(`${apiUrl}/${resource}/${params.id}`, {
      method: "PUT",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({ data: json })),

  updateMany: (resource, params) => {
    const query = {
      filter: JSON.stringify({ id: params.ids })
    };
    return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
      method: "PUT",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({ data: json }));
  },

  create: (resource, params) =>
    httpClient(`${apiUrl}/${resource}`, {
      method: "POST",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({
      data: { ...params.data, id: json.id }
    })),

  delete: (resource, params) =>
    httpClient(`${apiUrl}/${resource}/${params.id}`, {
      method: "DELETE"
    }).then(({ json }) => ({ data: json })),

  deleteMany: (resource, params) => {
    const query = {
      filter: JSON.stringify({ id: params.ids })
    };
    return httpClient(`${apiUrl}/${resource}?${stringify(query)}`, {
      method: "DELETE",
      body: JSON.stringify(params.data)
    }).then(({ json }) => ({ data: json }));
  }
};

对于getList，如何在header中添加token进行授权？

更新：

dataProvider.js

getList: (resource, params) => {
    /*
    console.log(params.pagination);
    console.log(params.sort);
    const {
      page,
      perPage
    } = params.pagination;
    const {
      field,
      order
    } = params.sort;
    */
    const query = {
      /*
      sort: JSON.stringify([field, order]),
      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
      filter: JSON.stringify(params.filter)
      */
    };
    const url = `${apiUrl}/${resource}/${stringify(query)}`;
    const token = localStorage.getItem('token');
    return httpClient(url).then(({
        headers: {
          "authorization": token
        }
      }, json
    }) => ({
      data: json,
      total: parseInt(
        headers
        .get("content-range")
        .split("/")
        .pop(),
        10
      )
    }));
  },

但是我得到这个错误：

./src/middlewares/dataProvider.js
  Line 35:5:  Parsing error: Unexpected token, expected ","

  33 |         }
  34 |       }, json
> 35 |     }) => ({
     |     ^
  36 |       data: json,
  37 |       total: parseInt(
  38 |         headers

感谢和问候

飞行棋

Answer 1

添加一个const const token = localStorage.getItem('token'); 并按如下方式使用

getList: (resource, params) => {
  console.log(params.pagination);
  console.log(params.sort);
  const {
    page,
    perPage
  } = params.pagination;
  const {
    field,
    order
  } = params.sort;
  const query = {
    sort: JSON.stringify([field, order]),
    range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
    filter: JSON.stringify(params.filter)
  };
  const url = `${apiUrl}/${resource}?${stringify(query)}`;
  const token = localStorage.getItem('token');
  return httpClient(url).then(({
      headers: {
        "authorization": token
      }
    }, json
  }) => ({
    data: json,
    total: parseInt(
      headers
      .get("content-range")
      .split("/")
      .pop(),
      10
    )
  }));
},

您也可以对其他请求执行相同的操作。

Answer 2

您必须更改 DataProvider 中的 httpClient，以便每个方法都使用正确的凭据。

改变这个：

const httpClient = fetchUtils.fetchJson;

为此：

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);
}

来源：https://marmelab.com/react-admin/Authentication.html

React-Admin header 中的 JWT 令牌

React-Admin JWT token in header

authorization

token

jwt

reactjs

react-admin