<Java script(vue.js)>vue-router遷移時にauthenticationのチェック

Question

実現したいこと

laravel5.5・vue.jsでアプリケーションを作成する中でvue-routerを使用しております。
そのなかで
・vue-router遷移時にuserのsession情報が切れている
・userが直接urlを叩く
この場合にuserのlogin sessionが切れていたらlogin画面(パスは /login)に遷移するようにしたい

困っていること

https://stackoverflow.com/questions/44731965/vuerouter-vuejs-and-laravel-route-guard?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

こちら参考にしましたが
①このurlの「authenticated」変数はどこでどのように設定しているのか？？
②また他の方法として
→vue-router遷移時に呼び出したcomponent内のcreatedメソッド内にてajaxでlogin authenticateを扱うAPIにリクエスト(APIはlaravelに元々ある権限部分を参考に自分で作成)
→返り値falseだった場合loginにwindow.location.hrefで遷移
が良いのかどうか？

ここの設計をどうするのが一番ベタなのかがいまいち不明なので、質問させていただきました。
皆様の意見をお聞き出来たら幸いです、よろしくお願いいたします。

Answer 1

vue-router遷移時に呼び出したcomponent内のcreatedメソッド内にてajaxでlogin authenticateを扱うAPIにリクエスト(APIはlaravelに元々ある権限部分を参考に自分で作成)

これだと遷移先のcomponentすべてに同様の処理を書くということになりませんか？
vue-routerにはnavigation guardという機能があります。Vue Router | ナビゲーションガード
beforeEach あたりを使えば、ページ遷移する際に毎回同じ処理をしてくれますので、そこに認証処理を書くというのも一つの方法かと思います。

Answer 2

こんな感じのvuexストアを用意しておいて

const store = new Vuex.Store({
  state: {
    authenticated: false
  },
  mutations: {
    authenticate (state) {
      state.authenticate = true;
    }
  }
})

vueインスタンスのmethodの中でajaxで認証API呼んでその結果に応じて
vuexに対してstore.commit('authenticate ')を呼んであげればよいのかと思います。

英語記事ですが、参考にできそうな記事があったので紹介します。
Vuex + Vue-Router + 外部APIの呼び出しについての記事なのでぴったりではないでしょうか?
【参考】Authentication Best Practices for Vue

Comments

[kazoogon]

なるほど、こちらでいけそうです。
ちなみに「非同期通信を行う際はaction」と習ったのですが、euledgeさんのコードではただ
action: {
register(context, userId){
context.commit('authenticate', userId);
}
}

のようなコードをただ省略しているだけなのでしょうか？？

[euledge]

そうですね、まだvuexの経験が無いのできちんとした手順ではなかったかもしれません。

Answer 3

I recommend you to maintain authenticated variable in the veux store

とあるので、共通に使用できる データストア (この例ではお勧めは vuex)で管理されているデータにauthenticatedを作って管理しなさいということです。
【参考】Vuex とは何か？

vue-routerは使用したことないので他の方に回答譲りますが、vue-routerってSPA内でルーティングするものなのではないでしょうか？私の理解だとSPA内のルーティングはブラウザのURLに出てこないのでwindow.location.hrefでは遷移できないのではないでしょうか？遷移するためにはvue-routerで解決する必要があるのではないかと思います。

Comments

[kazoogon]

回答ありがとうございます。
前からvuexは何かと気になっていましたが、この質問からスムーズに入ることができました。
一つ確認なのですが、
　①authenticatedをstoreのstateに保存(boolean)
②actionでajax送信し、authenticatedのAPIに値を送る(APIは返り値blooleanの物を作成)

という流れですかね？？