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

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

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

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

Ruby on Rails

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

Q&A

解決済

1回答

2643閲覧

Nuxt.jsでlocalStorageの値をasyncDataで使う方法

Khy

総合スコア118

Nuxt.js

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

Ruby on Rails

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

0グッド

0クリップ

投稿2020/01/07 12:48

編集2020/01/07 12:49

Nuxt.jsとRails APIでログイン機能を実装しております。

ログインの流れは以下の通りで考えております。

  1. axiosでemailとpasswordをRails APIに渡す
  2. gemのknockを使ってトークンを発行
  3. トークンをローカルストレージに保存
  4. Authorization Headerにトークンを埋め込みAPIからデータ取得

この流れの中で3までは実現できているのですが、4でauthorization headerにトークンを入れてRails APIに渡せなくて困っております。

以下にログインページ(login.vue)と認証が必要なページ(mypage.vue)のソースコードを載せておりますが、認証が必要なページのasyncDataでlocalStorageの値を使う方法が分かりません。

3でトークン自体はローカルストレージに入っているので、asyncData内でlocalStorageの値が使えれば解決すると思うのですが、asyncDataからlocalStorageの値を取得する方法はありますでしょうか?

js

1// ログインページ(login.vue) 2 3<template> 4 <v-form> 5 <v-text-field label="Eメール" v-model="email" /> 6 <v-text-field label="パスワード" v-model="password" /> 7 <v-btn @click="login">ログイン</v-btn> 8 </v-form> 9</template> 10<script> 11import jwtDecode from 'jwt-decode' 12const localStorage = window.localStorage 13 14export default { 15 middleware: 'authenticated', 16 data() { 17 return { 18 email: '', 19 password: '' 20 } 21 }, 22 methods: { 23 login() { 24 const data = { 25 auth: { 26 email: this.email, 27 password: this.password 28 } 29 } 30 this.$axios 31 .$post('/api/v1/user_token', data) 32 .then((res) => { 33 const jwtData = jwtDecode(res.jwt) 34 35 localStorage.setItem('idToken', res.jwt) 36 localStorage.setItem( 37 'expiresAt', 38 jwtData.exp * 1000 + new Date().getTime() 39 ) 40 41 this.$router.push('/mypage') 42 }) 43 .catch((error) => { 44 console.log(error) 45 }) 46 } 47 } 48} 49</script>

js

1// 認証が必要なページ(mypage.vue) 2<script> 3export default { 4 middleware: 'authenticated', // トークンの有効期限がきれていないかmiddlewareでチェック 5 6 // APIからユーザー一覧のデータを取得してStoreに保存 7 async fetch({ store, app }) { 8 const users = await app.$axios.$get('/api/v1/users', { 9 headers: { Authorization: `Bearer ${idToken}` }, // ★ここの実現方法が分かりません。 10 data: {} 11 }) 12 store.commit('setUser', users.data) 13 } 14} 15</script>

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

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

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

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

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

guest

回答1

0

自己解決

根本的に実装方法を変えて解決いたしました。

投稿2020/01/08 15:34

Khy

総合スコア118

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問