铁轨强参数不允许传递数据

Question

我正在尝试在FE和Rails BE上创建一个身份验证组件。

当我向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))
    }

)

用户模型

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： 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-注册 在此处输入图像描述

，这是当params无法传递密码时的断点。 在此处输入图像描述

任何人可以帮忙吗？

Answer 1

控制器期望以下结构中的有效载荷为
定义为： params.require（：user）.permit（：user_name，：emer_name，：email，：password，：passwand_confirnration）

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

在您的注册操作中，相应地传递有效载荷：

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))
    }
)

有关进一步阅读，请参阅在这里。