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 重做查詢並且它對您的應用程序是透明的，否則如果它無法更新它，它會將失敗返回給您的應用程序，以便您可以使用它執行某些操作，例如將您的用戶重定向到登錄頁。

希望這次我對你的問題回答得更多一點。 😇