[JAVA] [Nuxt / Rails] POST-Implementierung mit axios und devise_token_auth

Beim POSTEN mit axios und devise_token_auth mit Nuxt.js und Ruby on Rails blieb ich nüchtern stecken, daher werde ich es mit einem Memorandum zusammenfassen.

Implementierung auf der Ruby on Rails-Seite

Die Einstellungen von devise_token_auth werden weggelassen.

Die folgende URL war hilfreich, daher ist es möglicherweise gut, sie zu sehen.

https://github.com/lynndylanhurley/devise_token_auth https://qiita.com/Masahiro_T/items/6bc49a625b437a7c2f45 https://sainu.hatenablog.jp/entry/2018/08/11/194319

Da wir FormObject eingeführt haben, werden wir dies auch einbeziehen.

articles_controller.rb

class ArticlesController < ApplicationController
  def create
    @article = ArticleForm.new(article_params).save
    if @article
      #Kürzung
    end
  end

  private

  def article_params
    json_request = ActionController::Parameters.new(JSON.parse(request.body.read))
    json_request.permit(
      :title,
      :description,
    ).merge(user_id: current_user.id)
  end
end

articles_form.rb

class ArticleForm
  include ActiveModel::Model
  attr_reader :title, :description

  validates :title, presence: true, length: { maximum: 50 }
  validates :description, length: { maximum: 300 }

  def initialize(article_params)
    @article = article_params
  end

  def save
    return false if valid?
    Article.create(@article)

    true
  end
end

Jetzt können Sie POSTEN.

Ergänzung

Ich sollte mich mit Json anlegen, als es veröffentlicht wurde, also musste ich einen Prozess an Parse Json schreiben. (Ich war hier wirklich begeistert.)

def article_params
  json_request = ActionController::Parameters.new(JSON.parse(request.body.read))
  json_request.permit(
    :title,
    :description,
  ).merge(user_id: current_user.id)
end

Ich habe es gepostet, weil es im folgenden Artikel gespeichert wurde (oder besser gesagt, der Parse-Teil von Json wird kopiert).

http://tabunmuri.hatenablog.com/entry/2015/07/02/rails%E3%81%A7json%E3%81%AB%E3%80%81permit%E3%81%A7%E8%A6%81%E7%B4%A0%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%97%E3%81%9F%E3%81%84%E6%99%82%E3%81%AE%E6%96%B9%E6%B3%95

Implementierung auf der Seite von Nuxt.js.

Lassen Sie die in Component geschriebene Implementierung weg und schneiden Sie nur die Implementierung des POSTed-Teils mit Axios aus, die in Vuex ausgeführt wird.

article.js

export const actions = {
  async postArticle({ dispatch }, article) {
    await this.$axios
      .post('/articles', article, {
        headers: {
          'Content-Type': 'multipart/form-data', //Für die Annahme, ein Samune-Bild zu senden
          'access-token': this.state.user.userToken.accessToken,
          client: this.state.user.userToken.client,
          uid: this.state.user.userToken.uid,
        },
      })
      .then(() => dispatch('getArticleList'))
      .catch((error) => console.log(error))
  },
}

Das Token von devise_token_auth wird in ein Cookie gepackt und zum Zeitpunkt von nuxtServerInit in Vuex geschrieben, sodass das Token zum Zeitpunkt der Anforderung in den Header eingefügt werden kann.

Übrigens, obwohl es nicht Ruby on Rails ist, hat es eine ähnliche Implementierung, wenn GO-Echo verwendet wird, und das Memorandum ist unten zusammengefasst.

https://qiita.com/arthur_foreign/items/fadd784610d764419786