# 画面設計書 7-権限エラー画面

## 概要

本ドキュメントは、Payload CMSの管理画面における権限エラー画面の設計について記載する。ユーザーがアクセス権限のないリソースにアクセスしようとした場合に表示されるエラー画面である。

### 本画面の処理概要

本画面は、認証済みユーザーがアクセス権限のないページやリソースにアクセスしようとした場合に表示される画面である。エラーメッセージとログアウトボタンを表示し、ユーザーに適切なアクションを促す。

**業務上の目的・背景**：認証済みでも権限のないリソースへのアクセスを拒否し、セキュリティを確保する。ユーザーに対して明確なエラーメッセージを表示し、ログアウトして別のアカウントでログインするなどの対応を促す。管理者権限のないユーザーが管理画面にアクセスしようとした場合や、特定のコレクションへのアクセス権がない場合などに表示される。

**画面へのアクセス方法**：権限のないリソースにアクセスしようとした場合に自動的にリダイレクトまたは表示される。直接URLでアクセスする場合は `/admin/unauthorized` となる。

**主要な操作・処理内容**：
1. エラーメッセージを表示
2. ログアウトボタンを押下してログアウト画面へ遷移
3. 別のアカウントでログインし直すことを促す

**画面遷移**：
- 遷移元：権限のないリソースへのアクセス試行時
- 遷移先：ログアウト画面

**権限による表示制御**：本画面は権限不足時に表示されるエラー画面であり、全てのユーザーがアクセス可能である。ユーザーの状態（ログイン済みかつ管理画面アクセス権なし、または単純な権限不足）によって表示されるメッセージが異なる。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 63 | アクセス制御 | 主機能 | アクセス権限チェック結果の表示 |
| 6 | ユーザー認証 | 遷移先機能 | ログアウトボタンによる認証解除へ遷移 |

## 画面種別

エラー（権限エラー）

## URL/ルーティング

- **URL**: `/admin/unauthorized`
- **ルーティング定義**: `packages/next/src/routes/unauthorized`

## 入出力項目

本画面は入力項目を持たない。

## 表示項目

| 項目名 | 表示位置 | データソース | 説明 |
|--------|----------|--------------|------|
| エラー見出し | 上部 | i18n | 「権限がありません」または「管理画面へのアクセス権限がありません」 |
| エラー説明 | 見出し下 | i18n | 「このページにアクセスする権限がありません」 |
| ログアウトボタン | 中央下部 | - | ログアウト画面へのリンク |

## イベント仕様

### 1-ログアウトボタン押下

- **トリガー**: ログアウトボタン押下
- **処理内容**: ログアウト画面へ遷移
- **遷移先**: ログアウト画面（`/admin/logout`）

## データベース更新仕様

### 操作別データベース影響一覧

本画面ではデータベースの更新は行わない。

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|----------|
| error:unauthorizedAdmin | 見出し | 管理画面へのアクセス権限がありません | ログイン済みかつcanAccessAdmin=false |
| error:unauthorized | 見出し | 権限がありません | その他の権限エラー |
| error:notAllowedToAccessPage | 説明 | このページにアクセスする権限がありません | 常時 |
| authentication:logOut | ボタン | ログアウト | 常時 |

## 例外処理

本画面は例外表示用の画面であり、追加の例外処理は行わない。

## 備考

- `canAccessAdmin`権限によってエラーメッセージが変わる
- UnauthorizedViewWithGutterコンポーネントでGutterレイアウトが適用されたバージョンも提供
- ログアウト後に別のアカウントでログインし直すことを想定

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、権限チェックで使用されるPermissions構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Permissions型 | `packages/payload/src/admin/types.ts` | canAccessAdmin権限の構造 |

**読解のコツ**: permissionsオブジェクトのcanAccessAdminプロパティに注目。

#### Step 2: エントリーポイントを理解する

処理の起点となるサーバーコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | UnauthorizedView | `packages/next/src/views/Unauthorized/index.tsx` | サーバーコンポーネント |

**主要処理フロー**:
1. **行12-27**: initPageResultからpermissions、i18n、config、userを取得
2. **行29-48**: FormHeaderでエラーメッセージを表示
3. **行31-35**: user && !permissions.canAccessAdmin の条件でメッセージを切り替え
4. **行37-46**: ログアウトボタンをレンダリング

#### Step 3: バリエーションを理解する

Gutterレイアウト適用版のコンポーネントを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | UnauthorizedViewWithGutter | `packages/next/src/views/Unauthorized/index.tsx` | Gutterラッパー版 |

**主要処理フロー**:
- **行52-57**: Gutterコンポーネントで全体をラップ

### プログラム呼び出し階層図

```
UnauthorizedView (Server Component)
    |
    +-- FormHeader
    |     +-- heading (error:unauthorized / error:unauthorizedAdmin)
    |     +-- description (error:notAllowedToAccessPage)
    |
    +-- Button (el="link")
          +-- to: /admin/logout

UnauthorizedViewWithGutter (Server Component)
    |
    +-- Gutter
          +-- UnauthorizedView
```

### データフロー図

```
[入力]                    [処理]                         [出力]

initPageResult --------> UnauthorizedView
        |                      |
        v                      v
  permissions --------> [canAccessAdmin判定]
        |                      |
        +----> true ---------> error:unauthorized
        |                      |
        +----> false --------> error:unauthorizedAdmin
                               |
                               v
                         FormHeader表示
                               |
                               v
                         Button (ログアウト)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| index.tsx | `packages/next/src/views/Unauthorized/index.tsx` | ソース | サーバーコンポーネント |
| index.scss | `packages/next/src/views/Unauthorized/index.scss` | スタイル | 画面スタイル定義 |
| FormHeader | `packages/next/src/elements/FormHeader/index.tsx` | ソース | ヘッダーコンポーネント |
| Button | `packages/ui/src/elements/Button/index.tsx` | ソース | ボタンコンポーネント |
| Gutter | `packages/ui/src/elements/Gutter/index.tsx` | ソース | レイアウトコンポーネント |
