Rails 5 API + Vue.jsフロントエンド：devise_invitableでユーザーを招待するフォーム

Question

Vue.jsで招待状を書いています招待状はRails 5 APIにPOSTする必要があります。私はdevise_invitableを招待ロジックと電子メールディスパッチに使用しています。しかし、私はcreateメソッドを傍受することに問題があります。私は複数のユーザーに招待状を送っていますので、paramsの各ユーザーにUser.invite!を実行したいと思います。

マイポストにフォームを含むファイル、 invite.vue：

<template> 
    <b-row> 
    <b-col> 
     Invite {{form.length}} members 

     <b-form @submit.prevent="submitStaffInvite" id='staffInvite'> 
     <div v-for="(row, idx) in form"> 
      <b-row> 
      <b-col cols="3"> 
       <b-form-group id="firstNameGroup" label="First name"> 
       <b-form-input id="firstNameInput" name="user[first_name][]" type="text" v-model="row.firstName" autofocus></b-form-input> 
       </b-form-group> 
      </b-col> 
      <b-col cols="3"> 
       <b-form-group id="lastNameGroup" label="Last name"> 
       <b-form-input id="lastNameInput" name="user[last_name][]" type="text" v-model="row.lastName"></b-form-input> 
       </b-form-group> 
      </b-col> 
      <b-col cols="3"> 
       <b-form-group id="emailGroup" label="Staff email"> 
       <b-form-input id="emailInput" name="user[email][]" type="text" v-model="row.email"></b-form-input> 
       </b-form-group> 
      </b-col> 
      <b-col cols="3"> 
       <b-button @click='removeRow(idx)'>Remove invitation</b-button> 
      </b-col> 
      </b-row> 
     </div> 
     <br /> 
     <b-button-group> 
      <b-button @click.prevent='addRow'>Add invitation</b-button> 
     </b-button-group> 
     <br /> 
     <b-button-group> 
      <b-button type="submit" variant="primary">Submit</b-button> 
     </b-button-group> 

     </b-form> 
    </b-col> 
    </b-row> 
</template> 

<script> 
    export default { 
    data:() => { 
     return { 
     form: [ 
      { 
      email: '', 
      firstName: '', 
      lastName: '' 
      } 
     ] 
     } 
    }, 
    methods: { 
     addRow: function() { 
     this.form.push({ 
      email: '', 
      firstName: '', 
      lastName: '' 
     }) 
     }, 
     removeRow: function (idx) { 
     this.form.splice(idx, 1) 
     }, 
     submitStaffInvite: function() { 
     this.$axios.post('http://localhost:3001/auth/invitation', this.form) 
      .then((res) => { 
      if (res.status === 200) { 
       this.$notify({ 
       text: res.data.message, 
       group: 'alerts', 
       type: 'success' 
       }) 
      } 
      }) 
      .catch(function (error) { 
      error.response.data.errors.forEach((err) => { 
       this.$notify({ 
       text: err, 
       group: 'alerts', 
       type: 'warning' 
       }) 
      }) 
      }) 
     } 
    } 
    } 
</script> 

私ユーザー/ invitations_controller.rb

class Users::InvitationsController < Devise::InvitationsController 
    before_action :configure_permitted_parameters 

    def create 
    # TODO 
    # Send email to each user in the form. 
    end 

    def edit 
    sign_out send("current_#{resource_name}") if send("#{resource_name}_signed_in?") 
    set_minimum_password_length 
    resource.invitation_token = params[:invitation_token] 
    redirect_to "http://localhost:3001/auth/invitation/accept?invitation_token=#{params[:invitation_token]}" 
    end 

    def update 
    super do |resource| 
     if resource.errors.empty? 
     render json: { status: "Invitation Accepted!" }, status: 200 
     else 
     render json: resource.errors, status: 401 
     end 
    end 
    end 

    protected 

    def configure_permitted_parameters 
    devise_parameter_sanitizer.permit(:accept_invitation, keys: [:first_name, :last_name]) 
    end 
end 

私routes.rbを

Rails.application.routes.draw do 
    # Using devise_token_auth for the API 
    mount_devise_token_auth_for 'User', at: 'auth', 
             defaults: { format: :json }, 
             controllers: { 
             invitations: 'users/invitations' 
             } 
    ... 
end 

私は、次のルートが存在することがわかります。

PUT  /auth/invitation(.:format)   devise/invitations#update 
POST  /auth/invitation(.:format)   devise/invitations#create 

私もここで見ることができます問題は、私はルートはこのように見えるように期待したいということです。

PUT  /auth/invitation(.:format)   users/invitations#update 
POST  /auth/invitation(.:format)   users/invitations#create 

この動作が発生することがありますdevise_token_auth宝石によって、私はどのように修正するか分からない。

このフォームを送信すると、createメソッドを傍受することができるので、フォームに記載されているすべてのユーザーに対してUser.invite!を呼び出すことができます。私はcreateメソッド内にbyebugまたはbinding.pryを追加しようとしましたが、コードが実行されていないように見えます。つまり、バイパスされています。

私が表示されるエラーメッセージは次のとおりです。

Processing by Devise::InvitationsController#create as HTML 
    Parameters: {"_json"=>[{"email"=>"asd@ad.com", "firstName"=>"Test", "lastName"=>"Last"}], "invitation"=>{"_json"=>[{"email"=>"asd@ad.com", "firstName"=>"Test", "lastName"=>"Last"}]}} 
Completed 500 Internal Server Error in 0ms (ActiveRecord: 0.0ms) 



ArgumentError (wrong number of arguments (given 1, expected 0)): 

私はsがメソッドを作成devise_invitable」にフォームデータを渡すことになっていないだろうか？どんな助けも大歓迎です。

ありがとうございます！

Answer 1

はありがとう、あなたはthis article