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

Question

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の値を取得する方法はありますでしょうか？

// ログインページ（login.vue）

<template>
    <v-form>
      <v-text-field label="Eメール" v-model="email" />
      <v-text-field label="パスワード" v-model="password" />
      <v-btn @click="login">ログイン</v-btn>
    </v-form>
</template>
<script>
import jwtDecode from 'jwt-decode'
const localStorage = window.localStorage

export default {
  middleware: 'authenticated',
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    login() {
      const data = {
        auth: {
          email: this.email,
          password: this.password
        }
      }
      this.$axios
        .$post('/api/v1/user_token', data)
        .then((res) => {
          const jwtData = jwtDecode(res.jwt)

          localStorage.setItem('idToken', res.jwt)
          localStorage.setItem(
            'expiresAt',
            jwtData.exp * 1000 + new Date().getTime()
          )

          this.$router.push('/mypage')
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

// 認証が必要なページ（mypage.vue）
<script>
export default {
  middleware: 'authenticated', // トークンの有効期限がきれていないかmiddlewareでチェック

  // APIからユーザー一覧のデータを取得してStoreに保存
  async fetch({ store, app }) {
    const users = await app.$axios.$get('/api/v1/users', {
      headers: { Authorization: `Bearer ${idToken}` },  // ★ここの実現方法が分かりません。
      data: {}
    })
    store.commit('setUser', users.data)
  }
}
</script>

Answer 1

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