JWTで保護されたユーザ一覧を実装する ─ 認証・ロール・一覧表示まで

ログイン済みのadminユーザーだけにユーザー一覧を表示します。JWT認証の保護ルートとRBAC導入の第一歩となる実装

初回公開日2025/7/30

最終更新日2025/8/1

0. はじめに：なぜ「保護ルート」が重要か

Webアプリケーションにおいて、「認証されていないユーザーには見せない」ページを設けるのはとても基本的な要件です。たとえば管理者しかアクセスできないダッシュボード、ログイン済みのユーザーだけが見られる会員ページなどがそれにあたります。

これを「保護されたルート（Protected Route）」と呼び、適切に制御しないと、URLを直接打ち込むことで本来アクセスできないページを閲覧されてしまうリスクが生じます。

今回は、Next.js＋Shadcn/ui環境においてJWT認証による保護ルートの実装を体験していきます。あわせて、認証ユーザーの中でも「admin」ロールだけが見られる情報を表示する構成を用意し、RBAC（ロールベースアクセス制御）の準備も進めます。

1. 今回実装するページの概要と構成

今回は、ログイン後にアクセスできる /users ページ を実装します。以下のような構成になっています：

txt

+-----------------------+
| /login               |  ← JWTログイン（すでに過去記事実装済み）
+-----------------------+
           ⇩ 認証後
+-----------------------+
| /dashboard           |  ← ログイン後の初期ページ（すでに過去記事実装済み）
+-----------------------+
           ⇩ adminのみリンク表示
+-----------------------+
| /users               |  ← 今回実装する保護ルート
+-----------------------+
|  - JWT検証           |
|  - adminのみ表示     |
|  - Shadcn DataTable |
+-----------------------+

この /users ページは、JWTトークンで保護されたルートであり、トークンがない、もしくは不正な場合は AuthenticatedArea.tsx によって自動でブロックされます。

さらに、認証済みユーザーであっても、ロールが admin でない場合は一覧を表示せず、別のメッセージを表示する仕様です。

このように、「JWTでログイン済みかどうか」だけでなく、「どんな権限（ロール）か」まで考慮したアクセス制御に踏み出す構成になっています。

なお今回の実装は、以下の過去記事の内容をベースにした続編となっています。

【前提】ログイン画面をShadcn/uiで作成する
【前提】JWTログインAPIをNext.jsで実装する

もし、上記を未読の方はさらりとご確認ください。

ログイン処理とトークンの発行・保存はすでに完了している前提で進めていきます。

2. 仮データの作成（lib/users.ts）

この /users ページで表示するユーザー一覧は、PrismaやDBを使わずに、固定の「仮データ」で構成します（PrismaやDBを使用する内容は別途実施予定です）。

この段階ではまだDBとの接続は行わないため、src/lib/users.ts というファイルにユーザー情報を配列として記述します。

まずはファイルの全体像を確認しましょう：

ts : users.ts

export type User = {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user";
};

export const users: User[] = [
  { id: 1, name: "佐藤 一郎", email: "ichiro@example.com", role: "admin" },
  { id: 2, name: "鈴木 花子", email: "hanako@example.com", role: "user" },
  { id: 3, name: "高橋 次郎", email: "jiro@example.com", role: "user" },
];

解説：型定義とサンプルデータ

User 型を定義しています。
- id：数値型のユーザーID。
- name：表示用の名前。
- email：メールアドレス。
- role：アクセス制御に使うロール。今回は 'admin' または 'user' のどちらかに限定しています。
users 配列には、3人のサンプルユーザーを定義しています。
- 一人目（佐藤さん）のロールが admin。
- 他の2人は通常の user ロールです。

これにより、「adminユーザーだけがユーザー一覧を閲覧できる」仕組みを後述のUIで実装できます。

どこに置くべき？

このファイルは src/lib/users.ts に配置するのが自然です。lib/ ディレクトリはプロジェクト内で「データやロジックをまとめておく場所」として使われます。

将来的にPrismaを導入した際は、この仮データは prisma.user.findMany() に差し替えるだけでOKになるよう設計しておきます。

次は、この仮データを表示するためのコンポーネントを作成していきましょう。

3. 認証チェックとDataTableの表示（UsersClient.tsx）

この /users ページでは、JWTで認証されたユーザーだけがアクセスできるように制御し、さらにその中でも admin ロールのユーザーだけがユーザー一覧を閲覧できるようにします。

この仕組みの中核となるのが、以下の3つの要素です：

AuthenticatedArea.tsx：JWTトークンの検証と保護ルートの共通コンポーネント
UsersClient.tsx：認証情報を受け取り、UIを構成するコンポーネント
DataTable 関連のファイル群：Shadcn/ui のテーブル表示

まずはプロジェクト全体の構成を確認しましょう。

ページ構成図

txt

src/
├─ app/
│  ├─ users/
│  │   ├─ page.tsx           ← Server Component（ルーティングのみ）
│  │   ├─ UsersClient.tsx    ← 認証チェックと一覧表示（Client）
│  │   └─ columns.ts         ← DataTableのカラム定義
├─ components/
│  ├─ AuthenticatedArea.tsx    ← 認証されたユーザーのみ通過できる保護領域
│  └─ shared/
│      └─ data-table.tsx     ← 汎用DataTableコンポーネント
└─ lib/
   └─ users.ts               ← 仮のユーザーデータ（前章で作成）

DataTable を使うための準備

Shadcn/ui の DataTable は、おそらくは管理画面で情報一覧を表示する際に、マストで必要なものです。とても便利で動作も軽快です。 Shadcn/ui の DataTable は、内部的に @tanstack/react-table をベースに構成されています。以下のコマンドでテーブルコンポーネントを追加しておきましょう。

プロジェクトディレクトリ配下で下記を実行：

zsh

cd xxx/xxx/project/login-form

npx shadcn-ui@latest add table
npm install @tanstack/react-table

これにより components/ui/ 配下に table.tsx などのコンポーネントが追加され、共通UIとして活用できます。

Server Component（page.tsx）

まず /users ページは App Router において Server Component として構成されます。ここでは UI や認証判定は行わず、Client Component を呼び出すだけにとどめます。

src/app/users/page.tsxの内容：

tsx : page.tsx

import UsersClient from "./UsersClient";

export default function UsersPage() {
  return <UsersClient />;
}

認証チェック＋表示処理（UsersClient.tsx）

このファイルが /users ページの実質的な処理本体です。 AuthenticatedArea.tsx をラップし、トークンから取得したユーザー情報を UsersTable に渡します。

src/app/users/UsersClient.tsxの内容：

tsx : UsersClient.tsx

"use client";

import AuthenticatedArea, { User } from "@/components/AuthenticatedArea";
import { users } from "@/lib/users";
import { columns } from "./columns";
import { DataTable } from "@/components/shared/data-table";

export default function UsersClient() {
  return (
    <AuthenticatedArea>
      {(user: User) => (
        <div className="mx-auto max-w-4xl px-4 pt-10">
          <h1 className="mb-4 text-2xl font-bold">ユーザー一覧</h1>
          <p className="text-muted-foreground mb-6 text-sm">
            ログイン中ユーザー：{user.email}（ロール: {user.role}）
          </p>

          <DataTable columns={columns} data={users} />
        </div>
      )}
    </AuthenticatedArea>
  );
}

解説：

AuthenticatedArea は、JWTトークンの有効性をチェックする共通コンポーネントです。
子関数として (user: User) => ... を受け取る構造になっており、トークンから復元したユーザー情報を user として扱えます。
DataTable には仮データとカラム定義を渡します。
この時点ではロールの制御（admin判定）はまだしていません。次章で実装します。

カラム定義（columns.ts）

一覧表示に必要な「列の定義」は別ファイルで管理します。

src/app/users/columns.tsの内容：

ts : columns.ts

"use client";

import { ColumnDef } from "@tanstack/react-table";
import type { User } from "@/lib/users";

export const columns: ColumnDef<User>[] = [
  {
    accessorKey: "id",
    header: "ID",
  },
  {
    accessorKey: "name",
    header: "名前",
  },
  {
    accessorKey: "email",
    header: "メールアドレス",
  },
  {
    accessorKey: "role",
    header: "ロール",
  },
];

解説：

ColumnDef<User>[] によって、User 型に即した型安全なカラム定義が可能になります。
accessorKey で各プロパティに対応する列を指定し、header で表示名を指定しています。
複雑なレンダリングやアクション列などもこのファイルで柔軟に拡張できます。

共通DataTableコンポーネント（data-table.tsx）

このファイルは、Shadcn/ui の <Table> と、@tanstack/react-table を組み合わせて汎用的に再利用できる「一覧表示コンポーネント」を構築したものです。

src/components/shared/data-table.tsxの内容：

tsx : data-table.tsx

"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import {
  flexRender,
  getCoreRowModel,
  useReactTable,
  ColumnDef,
} from "@tanstack/react-table";

type Props<TData, TValue> = {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
};

export function DataTable<TData, TValue>({
  columns,
  data,
}: Props<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <TableHead key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                </TableHead>
              ))}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows.map((row) => (
            <TableRow key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

ここで何が起きているのか？（詳細解説）：

1. 型定義：Props<TData, TValue>

tsx

type Props<TData, TValue> = {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}

ジェネリクス（TData, TValue）を使うことで、再利用性と型安全性を確保。
この DataTable はどんな型のデータでも表示できる汎用コンポーネントです。
ColumnDef<TData, TValue>[] は @tanstack/react-table の定義済み型で、「どんな列を表示するか」を記述するもの。

2. useReactTable の構成

tsx

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

data：表示したい配列（例：users）
columns：列の定義（例：columns.ts）
getCoreRowModel()：内部的に行を「構造化」してくれる関数（必須）

この設定を行うことで、table.getHeaderGroups() や table.getRowModel() といった「整った形のデータアクセスAPI」が使えるようになります。

3. 表ヘッダーの表示

tsx

{table.getHeaderGroups().map(headerGroup => (
  <TableRow>
    {headerGroup.headers.map(header => (
      <TableHead>
        {flexRender(header.column.columnDef.header, header.getContext())}
      </TableHead>
    ))}
  </TableRow>
))}

getHeaderGroups() は複数行のヘッダー（例：グループ化ヘッダー）に対応。
flexRender() は、ヘッダーに関数が設定されていたときに、実行して描画してくれる関数。
例えば、header: ({ column }) => <strong>{column.id}</strong> のような動的描画が可能。

3. 表本体の表示

tsx

{table.getRowModel().rows.map(row => (
  <TableRow>
    {row.getVisibleCells().map(cell => (
      <TableCell>
        {flexRender(cell.column.columnDef.cell, cell.getContext())}
      </TableCell>
    ))}
  </TableRow>
))}

getRowModel().rows で、各行の構造化された情報が取得できる。
getVisibleCells() によって、隠し列などを除いた表示対象セルだけが取得される。
各セルも flexRender() で関数描画に対応。これにより、単なる文字列だけでなく、ボタンやチェックボックス、アイコンなども柔軟に埋め込めます。

この `data-table.tsx` を使うメリット:

Shadcn/ui の <Table> スタイルをそのまま活かせる
列定義とデータが完全に分離され、保守性が高い
再利用しやすく、複数ページで同じ形式のテーブルを共通化できる
flexRender() によって高いカスタマイズ性を実現できる

この時点で、「JWT認証済みのユーザーが一覧ページにアクセスし、仮データを表示できる」構成が整いました。次の章ではいよいよ user.role を使って、adminロールのみ表示できるよう制御する RBAC 機能を実装していきます。

4. ロールによる表示制御（adminのみに表示）

JWTでログインしたユーザーの中でも、「admin」ロールを持つユーザーだけが /users ページのユーザー一覧を閲覧できるように制御していきます。これにより、**認証に加えて権限レベルの制御（RBAC）**も導入されることになります。

実装方針

AuthenticatedArea.tsx ですでに JWT トークンから user 情報を取得できる構成になっています。
この user オブジェクトの role プロパティが "admin" のときだけ、ユーザー一覧（DataTable）を表示します。
それ以外のユーザーには、アクセス不可のメッセージを表示します。

修正対象：UsersClient.tsx

前章で作成した UsersClient.tsx に、ロール判定の条件を加えましょう。

src/app/users/UsersClient.tsxの内容：

tsx

"use client";

import AuthenticatedArea, { User } from "@/components/AuthenticatedArea";
import { users } from "@/lib/users";
import { columns } from "./columns";
import { DataTable } from "@/components/shared/data-table";

export default function UsersClient() {
  return (
    <AuthenticatedArea>
      {(user: User) => (
        <div className="mx-auto max-w-4xl px-4 pt-10">
          <h1 className="mb-4 text-2xl font-bold">ユーザー一覧</h1>
          <p className="text-muted-foreground mb-6 text-sm">
            ログイン中ユーザー：{user.email}（ロール: {user.role}）
          </p>

          {user.role === "admin" ? (
            <DataTable columns={columns} data={users} />
          ) : (
            <div className="text-destructive font-medium">
              このページは admin ロールのユーザーのみ閲覧可能です。
            </div>
          )}
        </div>
      )}
    </AuthenticatedArea>
  );
}

解説：RBACの基本制御

user.role === "admin" によって分岐し、条件付きレンダリングを行っています。
このように UI 側でロールによる制御を入れるだけでも、簡易的なRBACが実現できます。
なお、本格的なRBACは「APIレベル」でも制御する必要があります（これは次章以降で扱います）。

注意：UIだけの制御では不十分な理由

この段階では、あくまでフロントエンドでの表示制御のみです。つまり、仮に悪意のあるユーザーが DevTools でロールを偽装してしまえば、表示されてしまうリスクがあります。

このため、本番環境では以下が必須になります：

項目	必須？	解説
UIでのロール制御	✅	ユーザー体験上のガード（今回の実装）
APIでのロール検証	✅	データ取得APIで `admin` 判定を入れる
サーバー側でのガード	✅	SSR/ISRの段階でも非公開制御を行う場合

今回はまず「UIでの明示的な制御」を行い、次にAPIでの制御を実装するステップへとつなげていきます。

5. ダッシュボードから /users へ遷移するリンクの設置

このステップでは、ログイン後に表示される /dashboard ページに、/users ページへのリンクを追加します。ただし、adminロールを持つユーザーのみに表示するリンクとすることで、自然な形でRBACの導入を促します。

対象ファイル：DashboardClient.tsx

すでに /dashboard は DashboardClient.tsx という Client Component によって描画されています。ここで AuthenticatedArea を使ってログイン済みユーザー情報が取得できる構成でした。(過去記事JWTログインAPIをNext.jsで実装する)

ここにリンクを条件付きで追加します。

src/app/dashboard/DashboardClient.tsxの内容に追記：

diff : DashboardClient.tsx

"use client";

+ import Link from "next/link";
import AuthenticatedArea, { User } from "@/components/AuthenticatedArea";
+ import { Button } from "@/components/ui/button";

export default function DashboardClient() {
  return (
    <AuthenticatedArea>
      {(user: User) => (
        <div className="mx-auto max-w-xl pt-10">
          <h1 className="mb-4 text-2xl font-bold">ダッシュボード</h1>
          <p>ようこそ、{user.email} さん</p>
          <p className="text-muted-foreground mt-2 text-sm">
            アカウントID: {user.sub}
          </p>
          {user.role && <p>ロール: {user.role}</p>}
+           {user.role === "admin" && (
+             <div className="mt-6">
+              <Link href="/users">
+                 <Button variant="outline">ユーザー一覧ページへ</Button>
+               </Link>
+             </div>
+           )}
        </div>
      )}
    </AuthenticatedArea>
  );
}

解説：リンクの条件付き表示

user.role === "admin" によって、adminユーザーのみに表示されるリンクを実装。
Shadcn/ui のコンポーネントで装飾し、Next.js のでページ遷移。
保護ページ /users への「明示的な導線」として非常に重要なパーツです。

これにより、ログイン直後のユーザーにとって /users ページが発見可能となり、UXとしても自然な保護ルート導線が構築できます。

6. テスト

ここまでの内容をテストします。過去記事JWTログインAPIをNext.jsで実装するでsrc/app/api/login/route.tsにとりあえず、IDとパスワードをベタ打ちしているところを増やします。

src/app/api/login/route.tsの追記：

diff : route.ts

import { NextResponse } from "next/server";
import { signToken } from "@/lib/jwt";

// 仮のユーザーデータ（デモ用）
- const dummyUser = {
-   accountId: "demoAccount0123",
-   email: "demo@example.com",
-   password: "passWord0123456", // 本番ではハッシュ化必須
-   role: "admin",
- };

+ const dummyUsers = [
+   {
+     accountId: "adminAccount0123",
+     email: "admin@example.com",
+     password: "adminPass0123456",
+     role: "admin",
+   },
+   {
+     accountId: "userAccount1234",
+     email: "user1@example.com",
+     password: "userPass1234567",
+     role: "user",
+   },
+   {
+     accountId: "testuserAccount",
+     email: "user2@example.com",
+     password: "testPassword000",
+     role: "user",
+   },
+ ];

export async function POST(req: Request) {
  const body = await req.json();
  const { accountId, email, password } = body;

  // 入力値の検証（実際はZodやDB連携が必要）
-   if (
-     accountId !== dummyUser.accountId ||
-     email !== dummyUser.email ||
-     password !== dummyUser.password
-   ) {
-     return NextResponse.json({ error: "認証に失敗しました" }, { status: 401 });
-   }

+   // 仮ユーザーの中から一致するものを検索
+   const matchedUser = dummyUsers.find(
+     (user) =>
+       user.accountId === accountId &&
+       user.email === email &&
+       user.password === password,
+   );

+   if (!matchedUser) {
+     return NextResponse.json({ error: "認証に失敗しました" }, { status: 401 });
+   }

  // JWTのペイロード
-   const payload = {
-     sub: dummyUser.accountId,
-     email: dummyUser.email,
-     role: dummyUser.role,
-   };

+   const payload = {
+     sub: matchedUser.accountId,
+     email: matchedUser.email,
+     role: matchedUser.role,
+   };

  // トークン発行
  const token = await signToken(payload);

  // クライアントに返す（今回はJSONで返却。Cookie保存ではない）
  return NextResponse.json({ token });
}