nuxtでuser_idをfirebaseから取得して動的にルーティングしたい

Question

https://ja.nuxtjs.org/guide/routing/#%E5%8B%95%E7%9A%84%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0

firebaseで認証したユーザーごとにマイページを作成したく、

ドメイン/mypage/user_id

にしたいのですがnuxtでuser_idをfirebaseから取得してparamsでurl作るのってどうやればいいのでしょうか？

Answer 1

Nuxt.jsで動的なURLのページをつくるには、「_」ではじまる名前のvueファイルをつくります。

you88さんの場合、ディレクトリ構成は、

_user_idが必須でない場合、/pages/mypage/_user_id.vueとなり、
_user_idが必須の場合、/pages/mypage/_user_id/index.vueとなります。

あとは、ドメイン/mypage/1やドメイン/mypage/2など実際のIDをつけてアクセスするだけです。

他のコンポーネントからリンクを張りたければ、
<nuxt-link>のto属性に、user_idをバインディングすれば、
現在認証しているユーザー用のページに動的に遷移できます。
user_idはVuexなどで一括管理すればいいと思います。

補足

ご自身でURLを記載されていますが、ドキュメントで言えば該当箇所はここです。

追記(2018/11/17)

<nuxt-link>に動的にリンク先を設定する場合は、以下のような方法でできます。

<template>
  <nuxt-link :to="mypageUrl">マイページ</nuxt-link>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'sampleComponent',
  computed: {
    ...mapState({
      mypageUrl: (state) => `/mypage/${state.userId}`
    })
  }
}
</script>

/store/index.jsは以下のようにします。
(Firebaseの認証については省略しています。あくまで動的リンクの設定に注目しています)

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      userId: '' // 初期値
    },
    mutations: {
      setUserId(...) { ... } 
    },
    actions: {
      setUserId(...) { ... } 
    }
  })
}

追記(2018/11/18)

以下の「...mapState({ ... })」の部分は、スプレッド構文です。
コード省略に「...」と書いていたので紛らわしかったかもしれません。すみません。

// 省略
  computed: {
    ...mapState(/* 省略 */)
  }
// 省略

...mapState()はmapState()の結果(オブジェクト)をcomputed(オブジェクト)に展開します。

詳細は以下の参考資料を見てください。
MDN公式
Qiitaの記事1
Qiitaの記事2

Comments

[you88]

ありがとうございます。user_idとfirebaseの認証したユーザー情報のidを紐付けるのはどうやったらいいんでしょうか？

[NozomuIkuta]

認証ページ(ログインページ?)にユーザーID入力欄があると思いますが、ログインに成功(firebaseにユーザー情報がある)したら、入力されていたuser_idを、Vuexに格納して、各ページで利用すればよいのでは？追加の情報がないとなんとも言えませんが、ざっと言えばそんな感じだと思います。

もしくは、firebaseにあるユーザー情報を取得して、静的ページ(/mypage/1.htmlや/mypage/2.html)としてビルドしたいということでしょうか?

[you88]

ありがとうございます！

>入力されていたuser_idを、Vuexに格納して、各ページで利用すればよいのでは？追加の情報がないとなんとも言えませんが、ざっと言えばそんな感じだと思います。

こちらがイメージ近いです。user_idをurlのidにわたすのをどう書くのかがいまいちわからず。。。

[NozomuIkuta]

追記しました。

[you88]

ありがとうござます。

...mapState

の...はどういった意味のものになるでしょうか？

[NozomuIkuta]

追記しました。

[NozomuIkuta]

こちら、解決しましたか？
この件に関して追加で質問などなければ「解決済」にしていただくと他の方が検索するときにわかりやすいのでお願いします。

[you88]

こちら上記の方法で解決しました。ありがとうございました！

[NozomuIkuta]

解決したようでよかったです。