使用Axios - Rails API在ReactJS中注册的ReactJS

Question

我正在创建一个与ReactJS通信的简单Rails API。我已经使用Postman测试了API端点，它们可以工作。

但是，当我提交ReactJS表单来注册一个新用户时，我遇到了一些问题。我知道错误：

发布http://www.localhost:3000/api/v1/registration/reg 401 (未经授权)

我认为问题是在我的post请求期间没有提交或创建身份验证令牌。

ReactJS post request

这是处理表单提交按钮的ReactJS。

function handleFormSubmit(e) {
    e.preventDefault()
    axios.post("http://www.localhost:3000/api/v1/registration/reg")
        .then(res => {console.log(res)})
        .catch(err=>{console.log(err)})

}

如果我尝试使用Postman或Rails Console，我可以创建一个新用户。例如，在“邮递员”中，我刚刚做了: 1)发布localhost:3000/api/v1/registration/reg 2)创建一个随机用户: 3)

{
    "email": "waffle@gmail.com",
    "password": "12345678"
}

4)我回来了：

{
    "id": 4,
    "email": "waffle@gmail.com",
    "created_at": "2019-12-28T22:59:59.454Z",
    "updated_at": "2019-12-28T22:59:59.454Z",
    "authentication_token": "SzqjkJd5ocbVh1MziZZA"
}

这在ReactJS中不会发生，我将返回：

POST http://www.localhost:3000/api/v1/registration/reg 401 (未经授权)

Answer 1

您需要附加数据和授权令牌。

var user={
       "email": "waffle@gmail.com",
      "password": "12345678"
         }
var config = {
    headers: {'Authorization': "bearer " + token}
};

axios.post('http://www.localhost:3000/api/v1/registration/reg/user', 
  user,
  config
    )
    .then(function (response) {
     console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

如果您正在使用Http基本身份验证，只需添加

auth: {
    username: '....',
    password: '...'
} 

配置的输入。

Answer 2

因为用户还不存在，所以没有令牌对吗？因此，您希望在用户的创建函数之前使用跳过授权。因此，当您注册一个新用户时，您不需要发送令牌就可以访问该路由。

class UsersController <ApplicationController
skip_before_action :authenticate_user_from_token!, :only => [ :create]
  def create
    @user = User.create(user_params)
    render json: @user
  end

现在创建了用户，您可以进入登录路由，如果登录成功，您将收到令牌，下面是我的登录路由的会话控制器

class Api::V1::SessionsController < ApplicationController
  skip_before_action :authenticate_user_from_token!

  # POST /login
  def create
    @user = User.find_for_database_authentication( email: params[:user][:email])
    return invalid_login_attempt unless @user

    if @user.valid_password?(params[:user][:password])
      sign_in :user, @user
      render json: @user, serializer: SessionSerializer, root: nil
    else
      invalid_login_attempt
    end
  end

  private

  def invalid_login_attempt
    warden.custom_failure!
    render json: {error: t('sessions_controller.invalid_login_attempt')}, status: :unprocessable_entity
  end

end

您在前端的工作是维护从登录路由接收到的令牌。并通过headers授权参数将其应用于其余的获取请求。

headers: {'Authorization': "bearer " + token}