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

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

ただいまの
回答率

90.52%

  • Vue.js

    692questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,880

shichiria

score 24

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

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

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

イメージ説明

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

イメージ説明

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/27 20:13

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

    キャンセル

+1

  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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/27 20:14

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

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    xcodeでの画面サイズ変更方法

    swiftでサンプルコードを写しているのですが、参考書を今まで放置してたのでxcodeのバージョンが違うので画面サイズ変更の方法がわからないです。 simulatorでの表示画面

  • 解決済

    Blender Game Engineでマテリアルを透過したい

    Blenderでゲーム開発をしようとしているものです。 Blender Renderで透過処理したマテリアルをBlender Gameに反映させたいと思っているのですが、透過でき

  • 解決済

    ACCESS クエリでの一部重複?の除外方法について

    前提・実現したいこと こんにちは、質問タイトルが適格でないかもしれませんが宜しくお願いいたします。 通販事業をしており、商品の仕入から販売までのデータベースをACCESSの

  • 解決済

    GAS(google apps script)で一つのスプレッドシート内にある複数のスクリプトの挙動...

    GASに詳しい方、教えていただけますと助かります。 表題の件、一つのスプレッドシートに対してスクリプトが複数あってそれぞれに同じトリガーを設定している場合、そのトリガーが入っ

  • 解決済

    背景色の有無と::

    左上の図でleftの右とrightの右の水色が表示されません。特にエラーもありません。 宜しくお願い致します。 リンク内容 <!DOCTYPE html> <

  • 受付中

    ER図について

    つぶやきアプリを作っているのですが、 ER図を作るとする例えばどんなものがありますか?? サンプル程度でいいので教えていただきたいです

  • 解決済

    pycharmのpython console部分の色の変更

    プログラムには関係ないんですが・・・ 長時間PCの画面を見てると目が疲れてしまうので、色を変えてみようと思って 色を変更してみたのですが、python consoleの部分の色

  • 解決済

    ASUS ZenPadで、Camera2APIで、1分動画を2時間分撮影したいです。

    Nexsus 5Xでは、1分動画を、2時間ぶん、撮影することができました。 しかし、ZenPadでは、エラーが出ます。 このようなエラーが繰り返して表示されます。 参

同じタグがついた質問を見る

  • Vue.js

    692questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。