nuxt.jsでmiddlewareを一部のpageだけに適用させる方法

Nuxt.jsでmiddlewareをあるpageに適用させる際、一つ一つpageに指定することは面倒であり、漏れが発生する場合があります。例えば、ログインしていない場合は、ログインページにリダイレクトさせるmiddlewareなど特にそう言えます。

how to override the global middleware config in one page? でそのような議論がされていましたが、明確にはわかりませんでした。

しかし、Nuxt.jsの公式ページを読んだら解決できたのでその方法を記載しておきます。

まずはmiddlewareを全体に適用させる

authenticatedを全てのpageに適用する。

// nuxt.config.js
router: {
    middleware: 'authenticated',
},

middleware内部で適用させないpageを指定

authenticated.js内でroute.fullPathの値によって、処理を行うかどうか判別する。

// middleware/authenticated.js
export default function({store, route, redirect}) {
  if (!store.state.authenticate.authenticated && route.fullPath !== '/login') {
    return redirect('/login');
  }
}

このようにすることで、タイトル通りの動きを実現する事が可能になります。 issueにあるとおり、excludeやexceptのような方法があればもちろんその方がよいですが。

参考URL

• https://nuxtjs.org/guide/routing#middleware
• https://nuxtjs.org/api/configuration-router/#middleware
• how to override the global middleware config in one page?