react-fine-uploader 在后端使用 redux-token-auth 进行身份验证

Question

在我的堆栈中，我正在使用 redux-token-auth to authenticate users with my rails backend (devise_token_auth). In my app I need to allow authenticated users to upload images, for this I'm using react-fine-uploader。

我的问题是我没有找到一种方法可以让 ract-fine-uploader 到 POST 图像以经过身份验证的方式。以及一般如何使用 redux-token-auth 通过身份验证将数据上传到我的后端。

我发现 redux-token-auth 将身份验证令牌存储在 localStorage 中，因此我能够检索它并验证我的请求。虽然我不喜欢直接使用 localStorage.get("access-token") 访问此类数据（它是由包编写的，使用包来处理它似乎很公平）。

另外 react-fine-uploader 响应 object 不包含来自服务器响应的 headers，所以我不确定如何获取新令牌来存储它们.

这是我目前得到的代码：

我的ImagesUploader：

import React from "react";
import PropTypes from "prop-types";

import FineUploaderTraditional from "fine-uploader-wrappers";
import Gallery from "react-fine-uploader";
import { backend } from "../../libs/itemTools";
import "react-fine-uploader/gallery/gallery.css";

const ImagesUploader = props => {
  const uploader = new FineUploaderTraditional({
    options: {
      multiple: false,
      validation: {
        itemLimit: 1
      },
      request: {
        endpoint: backend.createImage,
        customHeaders: {
          "access-token": localStorage.getItem("access-token"),
          "token-type": localStorage.getItem("token-type"),
          client: localStorage.getItem("client"),
          uid: localStorage.getItem("uid")
        }
      },
      session: {
        endpoint: backend.loadImages(props.itemId)
      },
      deleteFile: {
        enabled: true,
        endpoint: backend.deleteImage(props.itemId)
      },
      cors: {
        expected: true
      },
      callbacks: {
        onComplete: (id, name, response, xhr) => {
          if (response.success) {
            response.image.id;
            //TODO save new access-token 
            // #######     THIS DOESN'T work, #########
            //fine-uploader doesn't include headers in the response object. 
            localStorage.setItem("access-token", response.headers["access-token"]);
            localStorage.setItem("token-type", response.headers("token-type"));
            localStorage.setItem("client", response.headers(client));
            localStorage.setItem("uid", response.headers(uid));
          } else {
            // [...]
          }
        },
        onSessionRequestComplete: (...params) => {
          console.log(
            "onSessionRequestComplete: " + JSON.stringify(params, 0, 2)
          );
        }
      }
    }
  });

  return (
    <div id="upload-area">
      <Gallery uploader={uploader} />
    </div>
  );
};

ImagesUploader.propTypes = {
  userId: PropTypes.number.isRequired,
  itemId: PropTypes.number.isRequired
};

export default ImagesUploader;

令我感到奇怪的是，redux-token-auth 包不考虑经过身份验证的后端调用，并且 fine-uploader 不提供对响应 headers 的访问权限。.

我是否遗漏了什么？

Answer 1

从查看 redux-token-auth 来看，它预计会处理所有 auth 调用，并且不会在代码中为您提供逃生通道 - 因此拔出 localstorage 似乎是一种谨慎的做法。您可以在代码中看到它为每个请求设置它：https://github.com/kylecorbelli/redux-token-auth/blob/8c5a8fe573918d406a733ca1b21c0b4349f137ab/src/actions.ts#L160

至于 fine-uploader 看来您可以使用 xhr.response 获取原始标题 https://github.com/FineUploader/fine-uploader/blob/master/client/js/traditional/traditional.xhr.upload.handler.js#L59

您返回的 response 变量已经通过您传入的 qq 变量进行了 JSON 解析：https://github.com/FineUploader/fine-uploader/blob/master/client/js/traditional/traditional.xhr.upload.handler.js#L109

react-fine-uploader 在后端使用 redux-token-auth 进行身份验证

react-fine-uploader to authenticate in the backend with redux-token-auth

authentication

access-token

fine-uploader

reactjs

redux