0

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

当我在我的 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 请求正常访问 /users/sign_in 端点时，有一个 Authorization 标头

这是前端（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)
}

结果：

在此处输入图像描述

4

1 回答 1

0

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

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

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

奖金

我建议您查看可以为您处理 JWT的restful-json-api-client 包，因为它会在响应中查找属性并将其存储并将其传递给您的请求。token

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

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

于 2020-10-22T08:27:15.643 回答