[Java] [Nuxt/Rails] Implementation using POST using axios and devise_token_auth

1 minute read

When I POST with Nuxt.js and Ruby on Rails using axios and devise_token_auth, I got cluttered up so I will summarize it in a memo.

Ruby on Rails implementation

I will omit various settings of devise_token_auth.

The following URLs are helpful, so you may want to take a look there.

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

Since FormObject is introduced, I will put it there as well.

articles_controller.rb


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

Now you’re ready to POST.

Supplement

I was supposed to mess with Json when POSTed, so I needed to write a process to Parse Json. (I’m really into this place.)

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

I saved it in the following article (or rather, copy and paste Json’s Parse part) so I will post it here.

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

Implementation on Nuxt.js side

The implementation written in Component is omitted, and only the part that is POSTed by axios that is being performed in Vuex is cut off.

article.js


export const actions = {
  async postArticle({ dispatch }, article) {
    await this.$axios
      .post('/articles', article, (
        headers: {
          'Content-Type':'multipart/form-data', // Assuming to send thumbnail image
          '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))
  },
}

I packed the token of devise_token_auth in a cookie and wrote it out to Vuex at nuxtServerInit, so that I can poke the Token in the header at the time of request.

By the way, it is not Ruby on Rails, but it has a similar implementation when using GO echo, and the memorandum is summarized below.

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