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

Question

我有一个非常典型的 Rails 后端，带有 Devise 和 Devise-JWT。 当我向端点/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在您的项目中不是强制性的，我建议您遵循我在Rails 6 / React 模板中所做的：

1. 配置您的项目路由以覆盖设计的会话路由，就像我在模板项目中所做的那样
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

3. 添加JwtWrapper在app/helpers/jwt_wrapper.rb ：

# 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 包，它可以为您处理 JWT，因为它会在响应中查找token属性并将其存储并传递给您的请求。

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

希望这次我对你的问题回答得更多一点。 😇