Nuxt.js で特定のページにだけBASIC認証を設定する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Nuxt.js で特定のページにだけBASIC認証を設定する方法について解説していきます。

1 Nuxt.js で特定のページにだけBASIC認証を設定する方法
- 1.1 Nuxt.js にBASIC認証を導入する
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 参考・引用
5 Twitterやってます！Follow Me！
6 最近の投稿

Nuxt.js で特定のページにだけBASIC認証を設定する方法

実務で特定のページにだけBASIC認証を設定するような要件がでてきたので、調査結果と実装方法をまとめます。

Nuxt.js にBASIC認証を導入する

Nuxt.js にBASIC認証を導入するのは簡単で、

まずnuxt-basic-auth-module というNuxt の BASIC認証 Module を installします。

yarn add nuxt-basic-auth-module

また、今回の要件のように、サイト全体ではなく、特定のページにだけBASIC認証を設定する場合は、

matchプロパティで認証を外したいページのpathを設定することで対応できます。

ちなみに、この設定では、正規表現も可能とのことです。

export default {
  modules: [
    'nuxt-basic-auth-module', // Nuxt_BASIC認証_Module
  ],
  // BASIC_認証
  basic: {
    name: 'robotama',
    pass: 'purupuru',
    enabled: true, // 有効化
    // 特定のページのパスだけ、BASIC認証をかける
    match: (req) => req.originalUrl === '/articles/robotama-special',
  },
}

上記の設定では、/articles/robotama-special のページだけに BASIC認証が効いている状態になります。