質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

1092閲覧

rails(devise_token_auth) × Nuxt.js(Auth Module)で認証を行うさいにレスポンスヘッダの情報に必要なものがない...

TatsuyaOkawa

総合スコア29

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/06/29 17:36

Nuxtの画面からemailpasswordを送ってrailsdevise_token_authで認証、
access-token/client/uidをレスポンスで受け取って``localStorage`に保存をしたいと思っています。

現状はPostmanでAPIを叩いての登録&ログインは動いていますし、Postman上ではHeadresも表示されています。

コマンドで叩いた時も同様で以下のように取得がされている状態です。

$ curl localhost:3000/api/v1/auth/sign_in -X POST -d '{"email":"test@gmail.com", "password":"password"}' -H "content-type:application/json" -i 結果 => HTTP/1.1 200 OK X-Frame-Options: SAMEORIGIN X-XSS-Protection: 1; mode=block X-Content-Type-Options: nosniff X-Download-Options: noopen X-Permitted-Cross-Domain-Policies: none Referrer-Policy: strict-origin-when-cross-origin Content-Type: application/json; charset=utf-8 access-token: C3x1Ujg7bflWSEEGwud_IA token-type: Bearer client: LEhRpZ8xwR98ENl7uW60hQ expiry: 1594658783 uid: test@gmail.com ETag: W/"1f7997550c2a07d9d9739f64d4dfd8e5" Cache-Control: max-age=0, private, must-revalidate X-Request-Id: e7c26e6d-eae5-4cfe-b2a6-52f9990629c8 X-Runtime: 0.289309 Vary: Origin Transfer-Encoding: chunked

そしてapiを叩きレスポンスヘッダの情報を取得するために、以下のようにNuxtアプリのPluginsに記載しています。

export default function ({ $axios }) { $axios.onResponse(response => { if (response.headers.client) { localStorage.setItem('access-token', response.headers['access-token']) localStorage.setItem('client', response.headers.client) localStorage.setItem('uid', response.headers.uid) localStorage.setItem('token-type', response.headers['token-type']) } }) }

そしてresponse.headersとして返ってきた内容が以下になります。

accept-ranges: "none" connection: "keep-alive" content-length: "2787" content-type: "text/html; charset=utf-8" date: "Mon, 29 Jun 2020 17:14:15 GMT" etag: ""ae3-Jb4rA/MdMTBwjZG+5o//VVym57U""

全く違うものが返ってきているの相当見当外れなことをしているような気がしていますが、かなりハマってしまっています。。。
お力お貸しいただければ助かります。よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Auth Modulethis.$auth.loginWithでAPIを叩かずに、普通に直で叩くとheadersがきちんと取得できました。
連動させるのかと考えていましたが、そういうものでは無さそうなのかな...?

投稿2020/06/29 18:30

編集2020/06/29 18:33
TatsuyaOkawa

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問