Nuxtのmiddleware上でのredirectには注意

現象

Nuxtで認証チェックを行う時に、middlewareを使うことがあると思います。

middleware

export default function ({ store, redirect, route }) {
  let token = sessionStorage.getItem('kintai-token');
    if (token) {
      return Promise.resolve()
    } else {
      redirect('/signin')
    }
}

リダイレクトした際、一瞬だけlayoutが適用される前のページが表示されてしまいます。

解決方法

リダイレクトの方法を変更します。

middleware

export default function ({ store, redirect, route }) {
  let token = sessionStorage.getItem('kintai-token');
    if (token) {
      return Promise.resolve()
    } else {
      window.location.href = '/signin'
      return new Promise((resolve) => {
　　　　　　　　　　　　　　　　// 完全にレンダリングされたらリダイレクトされる
      })
    }
}