nuxt.jsでmiddlewareを一部のpageだけに適用させる方法
Keywords
- Nuxt.js
Contents
- 1. まずはmiddlewareを全体に適用させる
- 2. middleware内部で適用させないpageを指定
- 3. 参考URL
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のような方法があればもちろんその方がよいですが。