Devise-JWT：使用 cURL 我可以看到一个 Authorization 标头。使用 Axios/Fetch 没有 Authorization 标头

Question

我有一个非常典型的带有 Devise 和 Devise-JWT 的 Rails 后端。当我向端点 /users/sign_in 发出原始 cURL 请求时，我可以在标头中看到它正在使用令牌设置授权标头。

当我在我的 React 前端（位于不同的端口，因此需要跨源配置）上执行相同的请求时，我在结果中看到的唯一标头是缓存控制和内容类型。

现在，我已经安装了“cors”gem。我创建了一个名为 config/initializers/cors.rb 的初始化程序，并将此配置放入其中：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
        origins '*'
        resource('*',
            headers: :any,
            expose: ["Authorization"],
            methods: :any
        )
    end
end

然而，当我在我的 React 前端发出请求时，我没有看到 Authorization 标头。

我可以看到 Rails 正在响应 302 重定向。这是问题的一部分吗？我是否需要配置设备以停止响应 302？

我完全不知道问题可能是什么。

如果您观察下面的屏幕截图，通过普通登录方式以正常方式登录会给我一个 Authorization 标头，但如果我通过 AJAX 进行，则没有标头。

这是前端 (AJAX) 代码，它没有给我任何授权标头，只有“缓存控制”和“内容类型”：

async function submitLogin(email, password) {
    let formData = new FormData();

    formData.append("user[email]", email)
    formData.append("user[password]", password)

    let result = await Axios.post(`${process.env.API_URL}/users/sign_in`, formData, {maxRedirects: 0})

    console.log(result)
}

结果：

Answer 1

免责声明：这不是您问题的 100% 答案，但它肯定会起作用！

---

如果devise-jwt 在您的项目中不是强制性的，我建议您按照我在my Rails 6 / React template 中所做的操作：

1. 配置您的项目路由以覆盖设计的会话路由，例如I did in my template project
2. 覆盖 Devise 的 SessionController 以使其以 JSON 格式响应并返回 JWT：

# frozen_string_literal: true

class SessionsController < Devise::SessionsController
  clear_respond_to
  respond_to :json

  def create
    super do |resource|
      if user_signed_in?
        resource.token = JwtWrapper.encode(user_id: current_user.id)
      end
    end
  end
end

1. 在app/helpers/jwt_wrapper.rb 中添加JwtWrapper：

# frozen_string_literal: true

module JWTWrapper
  extend self

  def encode(payload, expiration = nil)
    expiration ||= Rails.application.secrets.jwt_expiration_hours

    payload = payload.dup
    payload['exp'] = expiration.to_i.hours.from_now.to_i

    JWT.encode payload, Rails.application.secrets.jwt_secret
  end

  def decode(token)
    decoded_token = JWT.decode token, Rails.application.secrets.jwt_secret

    decoded_token.first
  rescue StandardError
    nil
  end
end

现在您将在响应正文中获得有效的 JWT。

奖金

我建议您查看restful-json-api-client package，它可以在handle JWT for you 中查找响应中的token 属性并将其存储并传递给您的请求。

它也是handle JWT renewal automatically!所以当你的API回复401错误时，如果你配置了更新路径，它会尝试更新JWT。如果成功，它将使用新的 JWT 重做查询，并且它对您的应用程序是透明的，否则如果更新失败，它会将失败返回给您的应用程序，以便您可以使用它执行某些操作，例如将用户重定向到登录页面。

希望这一次我能多回答你的问题。 ?