137 lines
4.5 KiB
Markdown
137 lines
4.5 KiB
Markdown
# سیستم احراز هویت پلتفرم همدست
|
||
|
||
## نحوه کارکرد
|
||
|
||
### 1. ورود به سیستم
|
||
کاربران از طریق شماره موبایل و کد تایید ۵ رقمی وارد سیستم میشوند.
|
||
|
||
**مراحل:**
|
||
1. ورود شماره موبایل در صفحه `/login`
|
||
2. ارسال درخواست به API: `/api/SignUpLoginBySMS`
|
||
3. دریافت کد تایید ۵ رقمی از طریق پیامک
|
||
4. وارد کردن کد تایید
|
||
5. ارسال درخواست تایید به API: `/api/verifyloginbysms`
|
||
6. دریافت اطلاعات کاربر و توکنها
|
||
7. ذخیره اطلاعات در localStorage
|
||
8. هدایت به صفحه اصلی
|
||
|
||
### 2. اطلاعات ذخیره شده در localStorage
|
||
|
||
پس از ورود موفق، اطلاعات زیر ذخیره میشود:
|
||
|
||
```javascript
|
||
{
|
||
"accessToken": "ACCESS_TOKEN", // توکن دسترسی
|
||
"refreshToken": "REFRESH_TOKEN", // توکن تازهسازی
|
||
"userId": "1025", // شناسه کاربر
|
||
"username": "1025", // یوزرنیم (همان ID کاربر)
|
||
"userInfo": "{...}" // اطلاعات کامل کاربر (JSON string)
|
||
}
|
||
```
|
||
|
||
### 3. محافظت از صفحات (Protected Routes)
|
||
|
||
تمام صفحات پلتفرم (به جز صفحه لاگین) با `ProtectedRoute` محافظت شدهاند.
|
||
|
||
**نحوه کار:**
|
||
- قبل از نمایش هر صفحه، توکن کاربر بررسی میشود
|
||
- اگر توکن معتبر نباشد، کاربر به صفحه لاگین هدایت میشود
|
||
- پیام خطا نمایش داده میشود
|
||
|
||
### 4. خروج از سیستم
|
||
|
||
کاربر میتواند از صفحه پروفایل خارج شود.
|
||
|
||
**مراحل:**
|
||
1. کلیک روی دکمه "خروج از حساب کاربری"
|
||
2. پاک کردن تمام اطلاعات از localStorage
|
||
3. هدایت به صفحه لاگین
|
||
4. نمایش پیام تایید خروج
|
||
|
||
## فایلهای مرتبط
|
||
|
||
### `/src/utils/auth.ts`
|
||
توابع کمکی احراز هویت:
|
||
- `isTokenValid()` - بررسی معتبر بودن توکن
|
||
- `getUserInfo()` - دریافت اطلاعات کاربر
|
||
- `getAccessToken()` - دریافت توکن دسترسی
|
||
- `getUsername()` - دریافت یوزرنیم
|
||
- `logout()` - خروج از سیستم
|
||
- `requireAuth()` - بررسی احراز هویت
|
||
|
||
### `/src/app/components/ProtectedRoute.tsx`
|
||
کامپوننت محافظت از مسیرها:
|
||
- بررسی توکن قبل از نمایش صفحه
|
||
- نمایش Loading در حین بررسی
|
||
- Redirect به لاگین در صورت عدم احراز هویت
|
||
|
||
### `/src/app/components/LoginPage.tsx`
|
||
صفحه ورود:
|
||
- ورود با شماره موبایل
|
||
- دریافت و تایید کد ۵ رقمی
|
||
- ذخیره اطلاعات کاربر
|
||
- Redirect به صفحه اصلی پس از ورود موفق
|
||
|
||
### `/src/app/routes.ts`
|
||
تعریف مسیرها:
|
||
- مسیر `/login` آزاد
|
||
- سایر مسیرها محافظت شده با `ProtectedRoute`
|
||
|
||
### `/src/config/api.ts`
|
||
تنظیمات API:
|
||
- آدرس پایه API
|
||
- قابل تغییر برای محیطهای مختلف
|
||
|
||
## نحوه استفاده
|
||
|
||
### بررسی وضعیت لاگین در کامپوننتها:
|
||
|
||
```typescript
|
||
import { isTokenValid, getUserInfo } from "../../utils/auth";
|
||
|
||
function MyComponent() {
|
||
const isLoggedIn = isTokenValid();
|
||
const userInfo = getUserInfo();
|
||
|
||
if (isLoggedIn && userInfo) {
|
||
console.log(`کاربر: ${userInfo.Name} ${userInfo.Family}`);
|
||
}
|
||
}
|
||
```
|
||
|
||
### خروج از سیستم:
|
||
|
||
```typescript
|
||
import { logout } from "../../utils/auth";
|
||
import { useNavigate } from "react-router";
|
||
|
||
function LogoutButton() {
|
||
const navigate = useNavigate();
|
||
|
||
const handleLogout = () => {
|
||
logout();
|
||
navigate("/login");
|
||
};
|
||
|
||
return <button onClick={handleLogout}>خروج</button>;
|
||
}
|
||
```
|
||
|
||
## نکات امنیتی
|
||
|
||
⚠️ **توجه:** در حال حاضر سیستم احراز هویت فقط بررسی وجود توکن را انجام میدهد.
|
||
|
||
**برای محیط Production باید:**
|
||
1. اعتبار سنجی تاریخ انقضای توکن اضافه شود
|
||
2. سیستم Refresh Token پیادهسازی شود
|
||
3. توکنها در هر درخواست API ارسال شوند
|
||
4. بررسی سمت سرور انجام شود
|
||
|
||
## تنظیمات API
|
||
|
||
برای تغییر آدرس API، فایل `/src/config/api.ts` را ویرایش کنید:
|
||
|
||
```typescript
|
||
export const API_BASE_URL = "https://your-domain.com";
|
||
```
|