https://github.com/takpap/nuxt-rbac-starter
A comprehensive Role-Based Access Control (RBAC) system built with Nuxt 3. This project demonstrates how to implement user authentication, role-based permissions, and a complete admin dashboard
https://github.com/takpap/nuxt-rbac-starter
admin-dashboard nuxt prisma rbac sqlite vue
Last synced: about 2 months ago
JSON representation
A comprehensive Role-Based Access Control (RBAC) system built with Nuxt 3. This project demonstrates how to implement user authentication, role-based permissions, and a complete admin dashboard
- Host: GitHub
- URL: https://github.com/takpap/nuxt-rbac-starter
- Owner: Takpap
- Created: 2025-03-26T20:28:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-29T19:42:57.000Z (about 1 year ago)
- Last Synced: 2025-03-29T20:28:34.685Z (about 1 year ago)
- Topics: admin-dashboard, nuxt, prisma, rbac, sqlite, vue
- Language: Vue
- Homepage:
- Size: 541 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.ja.md
Awesome Lists containing this project
README
# Nuxt RBAC (ロールベースのアクセス制御システム)
これはNuxt 3を使用して構築されたロールベースのアクセス制御(RBAC)システムのサンプルプロジェクトです。このプロジェクトは、Nuxtアプリケーションでユーザー認証とロールベースの権限制御を実装する方法を示しています。
## 機能
- ユーザー認証（登録、ログイン、ログアウト）
- ロールベースの権限制御
- ユーザー管理
- ロール管理
- 権限管理
- メニュー管理
- API権限検証ミドルウェア
- モダンなUIデザインとアニメーション効果
- アイコンライブラリの表示と管理
- システムアクティビティログの記録と照会
- システム監視とデータ統計
- 履歴データ分析とチャート表示
## 技術スタック
- [Nuxt 3](https://nuxt.com/) - Vue.jsフレームワーク
- [Prisma](https://www.prisma.io/) - ORMデータベースツール
- [Element Plus](https://element-plus.org/) - UIコンポーネントライブラリ
- [Tailwind CSS](https://tailwindcss.com/) - CSSフレームワーク
- [SQLite](https://www.sqlite.org/) - データベース（開発環境）
- [JWT](https://jwt.io/) - JSON Web Token認証
- [@nuxt/icon](https://nuxt.com/modules/icon) - アイコン管理、200,000以上のアイコンをサポート
- [Iconify](https://iconify.design/) - オープンソースアイコンコレクション
- [DayJS](https://day.js.org/) - 軽量日付処理ライブラリ
- [Chart.js](https://www.chartjs.org/) - チャート描画ライブラリ
- [Vue-ChartJS](https://vue-chartjs.org/) - Vue.js用Chart.js統合
- [Systeminformation](https://systeminformation.io/) - システム情報取得ライブラリ
## UIプレビュー
システムは美しいモダンなUIデザインを提供します：
- レスポンシブレイアウト、モバイルデバイスとデスクトップに適応
- ダイナミックカードとホバーエフェクト
- 明確なデータ可視化
- 豊富なアイコンライブラリとカスタムアイコンサポート
- 最適化されたフォームとテーブルデザイン
- リアルタイムシステム状態監視チャート
## システムアーキテクチャ
### データモデル
- **User**: ユーザー情報、ロール関連を含む
- **Role**: ロール定義、複数の権限を含む
- **Permission**: 権限定義、リソースと操作に基づく
- **RolePermission**: ロール-権限関連テーブル
- **Session**: ユーザーセッション管理
- **Menu**: メニュー構造定義
- **RoleMenu**: ロール-メニュー関連テーブル
- **ActivityLog**: システムアクティビティログ
### APIインターフェース
- **/api/auth**: 認証関連インターフェース（ログイン、登録、ログアウト）
- **/api/users**: ユーザー管理インターフェース
- **/api/roles**: ロール管理インターフェース
- **/api/permissions**: 権限管理インターフェース
- **/api/sessions**: セッション管理インターフェース
- **/api/activities**: アクティビティログインターフェース
- **/api/menus**: メニュー管理インターフェース
- **/api/system**: システム監視とデータ統計インターフェース
## クイックスタート
### 要件
- Node.js 18+
- Bun 1.0+
### インストール
```bash
# 依存関係のインストール
bun install
```
### データベース初期化
```bash
# 初期化とテストデータの投入
bun db:seed
```
### 開発環境
```bash
# 開発サーバーの起動
bun dev
```
http://localhost:3000 にアクセスしてアプリケーションを表示します。
### 本番ビルド
```bash
# 本番用ビルド
bun build
# ローカルで本番プレビュー
bun preview
```
## プロジェクト構造
```
├── prisma/ # Prisma設定と移行
│ ├── schema.prisma # データベースモデル定義
│ └── seed.ts # シードデータスクリプト
├── server/ # サーバーサイドコード
│ ├── api/ # APIエンドポイント
│ │ ├── auth/ # 認証関連API
│ │ ├── users/ # ユーザー管理API
│ │ ├── roles/ # ロール管理API
│ │ ├── permissions/ # 権限管理API
│ │ ├── sessions/ # セッション管理API
│ │ ├── menus/ # メニュー管理API
│ │ ├── activities/ # アクティビティログAPI
│ │ └── system/ # システム監視API
│ ├── middleware/ # ミドルウェア
│ │ └── auth.ts # 認証と権限検証ミドルウェア
│ ├── utils/ # ユーティリティ関数
│ └── services/ # サービスレイヤー
├── components/ # 共有コンポーネント
│ └── ui/ # UIコンポーネント
│ └── IconsDisplay.vue # アイコン表示コンポーネント
├── pages/ # ページコンポーネント
│ ├── dashboard.vue # ダッシュボードページ
│ ├── users.vue # ユーザー管理ページ
│ ├── roles.vue # ロール管理ページ
│ ├── permissions.vue # 権限管理ページ
│ ├── menus/ # メニュー管理ページ
│ ├── settings/ # システム設定ページ
│ ├── icons.vue # アイコンライブラリページ
│ ├── activities.vue # アクティビティログページ
│ ├── login.vue # ログインページ
│ └── register.vue # 登録ページ
├── layouts/ # レイアウトコンポーネント
│ ├── default.vue # デフォルトレイアウト
│ ├── admin.vue # サイドバー付き管理者レイアウト
│ └── home.vue # マーケティングフッター付きホームレイアウト
├── middleware/ # クライアントサイドミドルウェア
│ ├── auth.ts # 認証ミドルウェア
│ └── guest.ts # ゲストミドルウェア
├── composables/ # コンポーザブル関数
│ └── useAuth.ts # 認証関連関数
├── app.vue # アプリケーションエントリーコンポーネント
├── nuxt.config.ts # Nuxt設定
└── package.json # プロジェクト依存関係
```
## アイコンライブラリ機能
このプロジェクトは@nuxt/iconモジュールを統合し、以下の機能を提供します：
- 200,000以上のオープンソースアイコンへのアクセス
- アイコンカテゴリ表示と管理
- 便利なアイコン検索とプレビュー
- アイコン名のワンクリックコピー
- カスタムアイコンプレビュー
使い方はとても簡単です：
```vue
```
ここで `i-ph-user-duotone` はアイコン名で、`i-[コレクション名]-[アイコン名]` の形式になっています。例えば：
- `i-ph-user-duotone`: Phosphor Icons の user アイコン（デュオトーンバージョン）
- `i-mdi-home`: Material Design Icons の home アイコン
- `i-tabler-settings`: Tabler Icons の settings アイコン
## アクティビティログ機能
システムは包括的なアクティビティログ記録と照会機能を提供します：
### ログ記録
システムは以下のタイプのアクティビティを自動的に記録します：
- ユーザーのログインとログアウト
- リソースの作成、更新、削除（ユーザー、ロール、権限など）
- ロール割り当ての変更
- 権限の変更
- その他の重要なシステム操作
各ログエントリには以下の情報が含まれます：
- 操作タイプ（login、logout、create、update、delete、assign_roleなど）
- リソースタイプ（user、role、permissionなど）
- リソースID
- 詳細な説明
- 操作ユーザー情報
- IPアドレスとユーザーエージェント
- タイムスタンプ
### ログ照会
システムは強力なログ照会機能を提供します：
- 操作タイプによるフィルタリング
- リソースタイプによるフィルタリング
- ユーザーによるフィルタリング
- ページネーションとソート
- 明確な視覚的区別（異なる操作タイプは異なる色でマークされます）
### ダッシュボード統合
ダッシュボードは最近のシステムアクティビティを表示し、システム状態のリアルタイム概要を提供します。
### 実装技術
- Prisma ORMデータモデル
- RESTful APIインターフェース
- Vue 3 + Element Plus UI
- TypeScript型安全性
## システム監視と統計
システムは包括的なシステム監視とデータ統計機能を提供します：
### システム情報
- CPU使用率とコア数
- メモリ使用状況
- ディスク容量使用状況
- オペレーティングシステム情報
- サーバーアップタイム
### ビジネスデータ統計
- ユーザー登録傾向
- アクティブユーザーデータ
- システムリソース使用統計
- 各種リソースの成長傾向
### 履歴データ分析
- 多次元データフィルタリング
- 時間範囲選択
- チャート可視化
- データエクスポート機能
### チャートタイプ
- ラインチャート：時系列データの表示
- バーチャート：異なるカテゴリ間の数量比較
- パイチャート：比率分布の表示
- レーダーチャート：多次元メトリック比較
## 権限システム設計
このプロジェクトはロールベースのアクセス制御（RBAC）モデルを採用しています：
1. 各ユーザーは1つのロールに関連付けられています
2. 各ロールは複数の権限を含みます
3. 各権限はリソースとアクションの組み合わせとして定義されます
4. APIアクセス時にミドルウェアがユーザーが対応する権限を持っているかどうかを検証します
## メニュー管理機能
システムは柔軟なメニュー管理機能を提供します：
- マルチレベルメニュー構造サポート
- ロールベースのメニュー権限制御
- 動的ルート生成
- アイコンとソート順のカスタマイズ
- メニュー表示/非表示制御
管理バックエンドはサイドバー折りたたみ機能をサポートし、コンテンツ表示用のより多くのスペースを提供します：
- メニューバーの折りたたみ/展開切り替えをサポート
- アイコン化されたメニューの表示
- ユーザーの折りたたみ状態設定の自動保存
- トップナビゲーションバーのクイック折りたたみボタン
## 開発と貢献
IssueとPull Requestを歓迎します。
## ライセンス
[MIT](LICENSE)
_注：これはREADMEの日本語版です。他の言語バージョンは[英語](README.md)と[中国語](README.zh.md)で利用可能です。_