Devise-JWT:使用cURL，我可以看到一个授权头部。使用Axios/Fetch时没有Authorization标头

Question

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

当我在我的React前端上做同样的请求时(它在不同的端口上，所以跨源配置是必要的)，我在结果中看到的唯一的头文件是cache-control和content-type。

现在，我已经安装了“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重定向。这是问题的一部分吗？我是否需要配置devise以停止对302的响应？

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

如果你观察下面的屏幕截图，通过普通形式的登录登录会给我一个Authorization头，但如果我通过AJAX登录，就没有头了。

​

​

这是前端(AJAX)代码，它没有给我任何Authorization头，只有"cache-control“和"content-type"：

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

DISCLAMER:这不是你问题的100%答案，但它肯定会起作用！

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

JSON配置您的项目路由，以便覆盖设备的会话路由，如I did in my template project

• Override

1. 的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

在app/helpers/jwt_wrapper.rb中添加

1. 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重做查询，并且它对您的应用程序是透明的，否则，如果续订失败，它会将失败返回给您的应用程序，以便您可以对其执行某些操作，如将用户重定向到登录页面。

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