StrapiのAPI利用時に認証を追加する

StrapiでAPIをリクエストする際に、認証を追加してリクエストできるユーザーに制限をかける方法を試してみます。
今回の動作検証時のAPIリクエスト部分はNuxt.jsを使用しています。

設定方法

まず今回取得するコンテンツタイプを作成します。
今回はArticleという名前で作成して、以下のようなフィールドを用意しました。

権限は特に設定していないので、http://localhost:1337/articles にアクセスしても403が返ってくる状態です。

次にロールと権限を作成します。
左メニューの Settings > USERS & PERMISSIONS PLUGIN > Roles を選択して、右上のAdd new roleをクリックします。

名前をReaderにして、Application > Article でfind、findOne、countにチェックを入れて保存します。

次にユーザーを作成します。
左メニューの Users を選択して、右上のAdd New Usersをクリックします。

Roleを先ほど作成したReaderにして、それ以外は適宜設定して保存します。
これで管理画面上での設定は完了です。

APIリクエストの実装

まずは今作成したユーザーでサイト上からログインするようにNuxt.jsで実装してみます。
pagesディレクトリ内で下記内容のファイルを追加します。

<template>
  <h1>Hello world</h1>
</template>
<script>
  export default {
    async asyncData({ $axios }) {
      // ログイン
      const login = await $axios.$post('http://localhost:1337/auth/local', {
        identifier: 'ユーザー作成時に設定したメールアドレス',
        password: 'ユーザー作成時に設定したパスワード'
      });
      console.log('login', login);
    }
  }
</script>

ログイン後のAPIのレスポンスは以下のようになっています。(一部改変しています。)

{
  jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTc2OTM4MTUwLCJleHAiOjE1Nzk1MzAxNTB9.UgsjjXkAZ-anD257BF7y1hbjuY3ogNceKfTAQtzDEsU',
  user: {
    id: 1,
    username: 'reader',
    email: 'xxxxx@xxxxx.xxx',
    provider: 'local',
    confirmed: false,
    blocked: false,
    role: {
      id: 3,
      name: 'Reader',
      description: 'Reader role',
      type: 'reader'
    },
    created_at: 'XXX',
    updated_at: 'XXX'
  }
}

このjwtの値をリクエストヘッダーに含めることで、APIリクエストができるようになります。
先ほどのログイン処理後に、Articleの一覧を取得するようにしてみます。

<template>
  <ul>
    <li v-for="article of articles">
      {{ article.title }}
    </li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        articles: []
      }
    },
    async asyncData({ $axios }) {
      // ログイン
      const login = await $axios.$post('http://localhost:1337/auth/local', {
        identifier: 'ユーザー作成時に設定したメールアドレス',
        password: 'ユーザー作成時に設定したパスワード'
      });
      console.log('login', login);
      const res = await $axios.$get('http://localhost:1337/articles', {
        headers: {
          Authorization: 'Bearer ' + login.jwt,
        },
      });
      return {
        articles: res
      }
    }
  }
</script>

これでArticleの一覧を取得してページに表示することができました。