Nuxtにおけるmiddlewareの動作について

Question

現在、リロード時にも機能するログイン判定を元にしたページリダイレクト処理を、middlewareに記述しています。

export default function ({ store, redirect }) {
  if (store.state.store_info.login != true) {
    return redirect('/stores-admin/login/')
  }
}

この時、NuxtServerIntにはこのように書いて、sotreを初期化しています。tokenをlocalstrageに入れています。

async nuxtClientInit ({ state, commit }) {
    if (localStorage.token) {
      const store_info = await this.$axios.$get('/stores/me', {
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${localStorage.getItem('token')}`
        },
        data: {}
        })
      commit('setStore', store_info.store)
    }
  }

しかしながら、どうしてもmiddlewareが先に呼ばれ、NuxtServerIntでStoreのstore_info.loginにはtrueが入るのですが、入る前にmimddlewareの処理が走るために毎回false(デフォルト)判定されてしまいます。

原因がわかる方いましたら、よろしくお願いいたします。

Answer 1

middlewareの中で以下のように記述すると１度はnullが返ってきますが、stateに値がセットされたタイミングでも呼ばれるのでstore_info.loginが取得できるかと思います。

store.watch(state => {
  console.log(store.state.store_info.login);
});

最初のnullを回避する方法を私も模索中です。

自分の実装ではfirebaseのauthenticationを使っていたのでmiddreware内に

firebase.auth().onAuthStateChanged(user => {
...
}

とすることでリロード時でもログインしているかしていないかの判定がリロード時でもできるようになりました。