Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話

はじめに

実装したかった仕様

• 当初の仕様では、下記の３つの利用権限のみを管理する想定でした。

■利用権限
・ 上級会員権限
・ 中級会員権限
・ 一般メンバー権限

• しかし、途中で利用権限とは別で役職で権限を分けるオプション権限が仕様追加になりました。これにより、開発後半で、実装が複雑になっていきました…。

■利用権限
・ 上級会員権限
・ 中級会員権限
・ 一般メンバー権限

■役職オプション権限
・ 役員権限
・ 課長権限
・ 部長権限

• 権限パターン表のイメージ
  

• 画面上での制御イメージ
  

実際に実装した内容

権限チェックの全体フロー

• ログイン時に権限情報を取得して、それをlocalStorageに格納しておき、middlewareで権限チェックするような構成です。

実装内容

• 権限に応じた閲覧可能なURL定数をまとめたファイル

permissionConst.js

const permissions = {
  'employee': {
    general: [
    '/admin/organization', 
      '/admin/account'
  ]
  },
  'admin': {
    general: [
      '/admin/organization',
      '/admin/account',
      '/admin/analysis'
    ]
  }
}

• 認証周りのmiddlewareファイル

auth.js

// URLが企業管理画面の場合
if (fullPath.startsWith('/admin')) {

  if (permissions === 'admin') {
    // ダッシュボードへ
    redirect('/admin');
  }

  // URLが従業員画面の場合
} else if (fullPath.startsWith('/user')) {

  if (permissions === 'admin') {
    // ダッシュボードへ
    redirect('/user');
  }
}

• 権限制御の画面イメージ
  

実装してみた中での問題点

• 追加で新しい権限の概念が出てきた際にさらにif文地獄になる。
• 新しい権限が増えた時にメニューの表示・非表示の制御が難しくなる。

失敗を通しての改善策

• バックエンド側で細かい権限の制御ロジックを書く。
• ビット演算で複数の権限を一意に表現する。
• メニューの表示・非表示もバックエンド側で判別して、JSONで返却し、フロント側ではそのJSONを元にメニューの出し分けを行う。