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

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

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

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

リダイレクト

プログラムの入力元や出力先を通常とは別の場所に転送させることをリダイレクトと呼びます。

ルーティング

ルーティングとは、TCP/IPネットワークにおいて、目的のホストまでパケットを送る為のパス選定のプロセスを言います。

Q&A

0回答

399閲覧

middlewareでルーティングをするにはどうすれば良いのか?

退会済みユーザー

退会済みユーザー

総合スコア0

Nuxt.js

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

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

リダイレクト

プログラムの入力元や出力先を通常とは別の場所に転送させることをリダイレクトと呼びます。

ルーティング

ルーティングとは、TCP/IPネットワークにおいて、目的のホストまでパケットを送る為のパス選定のプロセスを言います。

0グッド

0クリップ

投稿2021/02/17 07:17

●実装したいこと
nuxtServerInitでToken認証をしたあと、middlewareでルーティングをしたい。
ユーザーがいるときはトップページ、いないときはログインページに飛ばしたい。

●現在のエラー
調べてみますと、nuxtServerInitでのToken認証は確実にできています。つまりここでのコードは予想通りに動いております。
しかしmiddlewareでのログイン状態に応じたルーティングが上手くいきません。

●現在の挙動
リロードするとまずログインページが表示されます。そのあとnuxt-linkの「サインアップ」ボタンを押すと、トップページにリダイレクトされます。

●原因と質問
その原因としては、middlewareでのユーザー情報の取得ができていないからです。
以下がルーティングに関するmiddlewareの記述です。

export default function({ store, redirect, route }) { const currentPath = route.path; console.log("middlewareでのgetUser.uidは " + store.getters.getUser.uid); if ( !!store.getters.getUser.uid && (currentPath === "/auth/signup" || currentPath === "/auth/login") ) { return redirect("/"); } if ( !store.getters.getUser.uid && currentPath !== "/auth/signup" && currentPath !== "/auth/login" ) { return redirect("/auth/login"); } }

これを実行したとき、コンソールは以下の様になります。
https://gyazo.com/23cfa8ef36b7dce79e408ecfbe840d3f
つまり、middlewareでユーザー情報が取得できていないことが分かります。

そのあとにnuxt-linkの「サインアップ」ボタンを押すと、コンソールは以下の様になります。
https://gyazo.com/0f060f2a496915368b09fb69cf2b69d5
ここで初めてユーザー情報が取得され、middlewareの条件に従ってトップページにリダイレクトされます。

つまりまとめると以下のイメージのようになります。
イメージ説明

nuxtServerInitからページが表示されるまでの間で、Storeのユーザー情報をもとにルーティング制御をするにはどうすればいいのでしょうか?

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問