Next.jsアプリの権限管理にCASLを使う

公開日時

Firebase Authでユーザ管理を行う際にカスタムクレームを利用するとサービス独自の設定を付与することが出来る。

公式ドキュメントにもあるようにadminフラグを使ったり、roleクレームを追加することで権限管理機能を追加することが出来る。

実際の権限管理はサービス側でカスタムクレームの内容をチェックして適切なレスポンスを返す必要がある。

この実装をする際に、最初は自前で権限管理を行っていたのだが、「自分の投稿した記事は見れる」や「自分の情報は編集できる」のような柔軟な権限管理をしたくなった際に自前でやるのはしんどくなってきたので権限管理のライブラリを調べてみた。

ダウンロード数ではaccesscontrolとaclが上位にあったが、リポジトリを見てみると最終更新が2年前とかになっていたので、次いでダウンロード数の多かったCASLを使うことにした。

@casl/abilityを使ってroleごとの権限ルールを記述しておき、特定の権限が必要なapiで↓のようにして権限チェックができる。

const ability = defineAbilityFor(req.currentUser)
ForbiddenError.from(ability).throwUnlessCan('read', 'User')

↓のリポジトリに様々なパターンのサンプルがあるので参考になる。

また、CASLはNodejsだけでなくブラウザ環境にも対応しているため、CASL Reactを使うと、権限に応じたコンポーネント表示の出し分けができる。


Related #next.js

FigmaでSVG Octocatを作る その3

アウトライン化大事

Next.jsプロジェクトのGoogle Analytics V3をV4に更新する

トラッキングIDの差し替えのみで対応が完了した

Vercelで指定のブランチのみデプロイを実行する

Ignored Build Stepを設定した