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

Question

在我的堆栈中，我使用redux-token-auth 通过我的 rails 后端 (devise_token_auth) 对用户进行身份验证。在我的应用程序中，我需要允许经过身份验证的用户上传图像，为此我使用react-fine-uploader。

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

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

同样react-fine-uploader 的响应对象不包含来自服务器响应的标头，因此我不确定如何获取新令牌来存储它们。

这是我目前得到的代码：

我的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 不提供对响应标头的访问权限，这对我来说似乎很奇怪..

我可能缺少什么吗？

Answer 1

通过查看redux-token-auth，它希望处理所有身份验证调用，并且不会在代码中为您提供逃生舱口——因此拉动本地存储似乎是一种谨慎的做法。您可以在代码中看到它为每个请求设置它：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