[JAVA] [Nuxt / Rails] Implémentation POSTed en utilisant axios et devise_token_auth

Lors du POST en utilisant axios et devise_token_auth avec Nuxt.js et Ruby on Rails, je suis resté bloqué de manière sobre, je vais donc le résumer avec un mémorandum.

Implémentation côté Ruby on Rails

Les paramètres de devise_token_auth sont omis.

L'URL suivante a été utile, il peut donc être bon de la voir.

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

Depuis que nous avons introduit FormObject, nous l'inclurons également.

articles_controller.rb

class ArticlesController < ApplicationController
  def create
    @article = ArticleForm.new(article_params).save
    if @article
      #réduction
    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

Vous êtes maintenant prêt à POSTER.

Supplément

J'étais censé jouer avec Json quand il a été POSTé, j'ai donc dû écrire un processus à Parse Json. (J'étais vraiment dedans ici.)

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

Je l'ai posté car il a été enregistré dans l'article suivant (ou plutôt, la partie Parse de Json est copiée).

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

Implémentation côté Nuxt.js

Omettez l'implémentation écrite dans Component et supprimez uniquement l'implémentation de la partie POSTed avec axios qui est faite dans Vuex.

article.js

export const actions = {
  async postArticle({ dispatch }, article) {
    await this.$axios
      .post('/articles', article, {
        headers: {
          'Content-Type': 'multipart/form-data', //Pour l'hypothèse d'envoyer une image samune
          '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))
  },
}

Le jeton de devise_token_auth est emballé dans un cookie et écrit dans Vuex au moment de nuxtServerInit, afin que le jeton puisse être inséré dans l'en-tête au moment de la demande.

À propos, bien que ce ne soit pas Ruby on Rails, il a une implémentation similaire lors de l'utilisation de GO echo, et le mémorandum est résumé ci-dessous.

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