Vue.js+vuexでのログイン処理の書き方

Question

Vue.js+vuexでログイン処理を書いているのですが、
ログイン処理の書き方に迷っています。
ログインでトークンを作成し、
API呼び出しの度にトークンを引き回して使用したいのですが、

最初のログイン時、APIでトークンが無効だったなど、
何かしらログインが無効になった時に任意の画面にログインダイアログを出そうと思っています。

その際に、どこでログイン処理をして、どこでダイアログを書けばいいのか困っています。
vuexのstore内のアクションでログイン処理をしようとしたのですが、
アクション内だとダイアログが出せず、別途コンポーネントとしてダイアログを実装し、
各画面に置かねばなりません。
これは少し冗長かなと感じています。

出来れば下記のようにログイン処理を呼び出したら完結するようにしたいのですが、
それはそれで出来たとしてもVuexを使った正しい書き方のような気がしません。

Vuexを使い慣れてないせいもあると思いますが、
このような場合どう書くのが一番綺麗になるでしょうか？
私自身があまりVuexを理解していないので、ぼんやりした質問ですみません。

Answer 1

上の認識であっております。
storeにコンポーネントを持つことはできません。

そのため、共通のコンポーネントを持つように実装するのがよろしいかと思います。
コンポーネントはそれのみ単独で動作するようにして、それを各ページでは呼び出すのみとします。

冗長性を取り除く例をnuxt.jsでのフォルダ構造を例にサンプルで作ってみました。
https://codesandbox.io/s/github/sakapun/vue-slot-sample/tree/master/
slotを使い各ページでダイアログ要素を埋め込んでいますが、各ページにはコンポーネントを配置するようなことなことはしていません。

Comments

[shichiria]

Componentを入れ子にしてレイアウトを作るという発想はありませんでした。
確かに冗長性なく今のダイアログを綺麗に使えそうです。
ありがとうございました。

Answer 2

1. Loginの失敗状態をStoreに追加
2. Loginの失敗失敗したら、StoreのLoginの失敗状態をtrue
3. 失敗理由をLoginStoreに書き込み
4. rootに配置した、login-dialogにとエラーメッセージとLogin失敗状態をバインディング

コンポーネントの配置に関しては下記のような感じで、
root要素にアラート要素にlogin-dialogコンポーネントを差し込んでみるといいかと思います。
position:absoluteとか指定すれば、login-dialog要素は各画面より上に乗っかるかと思います。

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- ナビゲーションに router-link コンポーネントを使う -->
    <!-- リンク先を `to` プロパティに指定します -->
    <!-- デフォルトで `<router-link>` は `<a>` タグとして描画されます -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- ルートアウトレット -->
  <!-- ルートとマッチしたコンポーネントがここへ描画されます -->
  <router-view></router-view>
  <login-dialog v-if="isLogin" :message="errorMessage"></login-dialog>
</div>

Comments

[shichiria]

この方法でも綺麗にできそうです、ありがとうございます。
こちらも参考にさせていただきます。