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

SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

クロスオリジン分離対応を実施

react-hook-formとReact Datepickerを組み合わせる

Hook FormのControllerを使う

Next.jsで生成したサイトで特定のページのみnoindexを設定する

タグに紐づく記事一覧ページはnoindexにした

Next.jsでAdsenseタグを埋め込んだら Only one AdSense head tag supported per page エラーが発生

Only one AdSense head tag supported per page. The second tag is ignored.