Rails 強參數不允許傳遞數據

Question

我正在嘗試在 FE 和 Rails BE 上使用 React 創建一個身份驗證組件。

當我向 API 發送創建用戶的請求時，我不確定這里有什么問題。 密碼不被允許，應用程序中斷。

我在 FE 上的注冊操作：

export const signupUser = createAsyncThunk('user/signupUser', 
    async(userData, thunkAPI) => {
        console.log('userData',userData)
        let url = 'http://localhost:3000/users';
        let apiObject = {
            method:'POST',
            headers: {
                accept: "application/json",
                "content-type":"application/json"
            },
            body: JSON.stringify({
                user_name: userData.name,
                email: userData.email,
                password: userData.password,
                password_confirmation: userData.password_confirmation
            })
        }
        fetch(url, apiObject)
        .then(response => response.json())
        .then(data => console.log(data))
    }

)

我在 BE 上的用戶 Model：

class User < ApplicationRecord
    has_secure_password

    validates :user_name, presence: true
    validates :email, uniqueness: true, presence: true

    # has_many :reports dependent: :destroy
    # has_many :properties dependent: :destroy
end

BE 上的用戶/控制器：

class UsersController < ApplicationController


    def index
        users = User.all
        render json: users
    end

    def create
        user = User.new(user_params)
         binding.pry
        if user.save && user.authenticate(user_params[:password])
            binding.pry
            token = encode_token({user_id: user.id})
            render json: { user: UserSerializer.new(user).serializable_hash, token: token}, status: :created
        else
            render json: {error: user.errors.full_messages.to_sentence}, status: :unprocessable_entity
        end

    end

    private 

    def user_params
        params.require(:user).permit(:user_name, :email, :password, :password_confirmation)
    end
end

我用 pry 來嘗試理解，所以這里是流程：UI- signup enter image description here

這是參數無法傳遞密碼時的斷點。 在此處輸入圖像描述

有人能幫忙嗎？

Answer 1

controller 需要以下結構中定義的有效負載： params.require(:user).permit(:user_name, :email, :password, :password_confirmation)

{
   user: 
     {
        username: <value>,
        email: <value>,
        password: <value>,
        password_confirmation: <value>
     }
}

在您的 SignUp 操作中，相應地傳遞有效負載：

export const signupUser = createAsyncThunk('user/signupUser', 
    async(userData, thunkAPI) => {
        console.log('userData',userData)
        let url = 'http://localhost:3000/users';
        let apiObject = {
            method:'POST',
            headers: {
                accept: "application/json",
                "content-type":"application/json"
            },
            body: JSON.stringify({
                user: {
                    user_name: userData.name,
                    email: userData.email,
                    password: userData.password,
                    password_confirmation: userData.password_confirmation
                }
            })
        }
        fetch(url, apiObject)
        .then(response => response.json())
        .then(data => console.log(data))
    }
)

如需進一步閱讀，請參閱此處。