etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from BEDOLAGA-DEV/dev

Browse Source 
Dev
This commit is contained in:
Egor
2026-01-18 05:23:06 +03:00
committed by GitHub
parent 7a63f1bab7 5882c305ef
commit 6b58ff457e
4 changed files with 416 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/api/client.ts
View File

@@ -1,27 +1,21 @@
import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios'
import { tokenStorage, isTokenExpired, tokenRefreshManager } from '../utils/token'
const API_BASE_URL = import.meta.env.VITE_API_URL || '/api'
const TELEGRAM_INIT_STORAGE_KEY = 'telegram_init_data'
// Настраиваем endpoint для refresh
tokenRefreshManager.setRefreshEndpoint(`${API_BASE_URL}/cabinet/auth/refresh`)
const getTelegramInitData = (): string | null => {
if (typeof window === 'undefined') return null
const initData = window.Telegram?.WebApp?.initData
if (initData) {
try {
localStorage.setItem(TELEGRAM_INIT_STORAGE_KEY, initData)
} catch {
/* ignore storage errors */
}
tokenStorage.setTelegramInitData(initData)
return initData
}
try {
return localStorage.getItem(TELEGRAM_INIT_STORAGE_KEY)
} catch {
return null
}
return tokenStorage.getTelegramInitData()
}
export const apiClient = axios.create({
@@ -31,9 +25,24 @@ export const apiClient = axios.create({
},
})
// Request interceptor - add auth token
apiClient.interceptors.request.use((config: InternalAxiosRequestConfig) => {
const token = localStorage.getItem('access_token')
// Request interceptor - add auth token with expiration check
apiClient.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
let token = tokenStorage.getAccessToken()
// Проверяем срок действия токена перед запросом
if (token && isTokenExpired(token)) {
// Используем централизованный менеджер для refresh
const newToken = await tokenRefreshManager.refreshAccessToken()
if (newToken) {
token = newToken
} else {
// Refresh не удался - редирект на логин
tokenStorage.clearTokens()
window.location.href = '/login'
return config
}
}
if (token && config.headers) {
config.headers.Authorization = `Bearer ${token}`
}
@@ -45,38 +54,26 @@ apiClient.interceptors.request.use((config: InternalAxiosRequestConfig) => {
return config
})
// Response interceptor - handle 401, refresh token
// Response interceptor - handle 401 as fallback
apiClient.interceptors.response.use(
(response) => response,
async (error: AxiosError) => {
const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean }
// Если получили 401 и ещё не пробовали refresh (на случай если проверка exp не сработала)
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true
const refreshToken = localStorage.getItem('refresh_token')
if (refreshToken) {
try {
const response = await axios.post(`${API_BASE_URL}/cabinet/auth/refresh`, {
refresh_token: refreshToken,
})
const { access_token } = response.data
localStorage.setItem('access_token', access_token)
const newToken = await tokenRefreshManager.refreshAccessToken()
if (newToken) {
if (originalRequest.headers) {
originalRequest.headers.Authorization = `Bearer ${access_token}`
originalRequest.headers.Authorization = `Bearer ${newToken}`
}
return apiClient(originalRequest)
} catch (refreshError) {
// Refresh failed, clear tokens and redirect to login
localStorage.removeItem('access_token')
localStorage.removeItem('refresh_token')
localStorage.removeItem('user')
} else {
// Refresh не удался
tokenStorage.clearTokens()
window.location.href = '/login'
return Promise.reject(refreshError)
}
}
}
@@ -85,4 +82,3 @@ apiClient.interceptors.response.use(
)
export default apiClient

11
src/components/TopUpModal.tsx
View File

@@ -19,7 +19,10 @@ const buildCryptoBotDeepLink = (url: string): string | null => {
return `tg://resolve?domain=CryptoBot${parsed.search || ''}`
}
return null
} catch { return null }
} catch (e) {
console.warn('[TopUpModal] Failed to build CryptoBot deep link:', e)
return null
}
}
const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
@@ -28,7 +31,7 @@ const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
// If inside Telegram Mini App, let Telegram handle t.me links
if (isTelegramPaymentLink(url) && webApp?.openTelegramLink) {
try { webApp.openTelegramLink(url); return } catch { /* ignore */ }
try { webApp.openTelegramLink(url); return } catch (e) { console.warn('[TopUpModal] openTelegramLink failed:', e) }
}
// Prefer Telegram deep link specifically for CryptoBot invoices, but only when
@@ -37,7 +40,7 @@ const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
const target = cb && !isTelegramPaymentLink(url) ? cb : url
if (reservedWindow && !reservedWindow.closed) {
try { reservedWindow.location.href = target; reservedWindow.focus?.() } catch { /* ignore */ }
try { reservedWindow.location.href = target; reservedWindow.focus?.() } catch (e) { console.warn('[TopUpModal] Failed to use reserved window:', e) }
return
}
@@ -136,7 +139,7 @@ export default function TopUpModal({ method, onClose }: TopUpModalProps) {
onClose()
},
onError: (error: unknown) => {
try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch { /* ignore */ }
try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch (e) { console.warn('[TopUpModal] Failed to close popup:', e) }
popupRef.current = null
const detail = (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail || ''
if (detail.includes('not yet implemented')) setError(t('balance.useBot'))

112
src/store/auth.ts
View File

@@ -2,6 +2,7 @@ import { create } from 'zustand'
import { persist } from 'zustand/middleware'
import type { User } from '../types'
import { authApi } from '../api/auth'
import { tokenStorage, isTokenValid, tokenRefreshManager } from '../utils/token'
export interface TelegramWidgetData {
id: number
@@ -33,6 +34,10 @@ interface AuthState {
loginWithEmail: (email: string, password: string) => Promise<void>
}
// Блокировка для предотвращения race condition при инициализации
let initializePromise: Promise<void> | null = null
let isInitializing = false
export const useAuthStore = create<AuthState>()(
persist(
(set, get) => ({
@@ -44,8 +49,7 @@ export const useAuthStore = create<AuthState>()(
isAdmin: false,
setTokens: (accessToken, refreshToken) => {
localStorage.setItem('access_token', accessToken)
localStorage.setItem('refresh_token', refreshToken)
tokenStorage.setTokens(accessToken, refreshToken)
set({
accessToken,
refreshToken,
@@ -64,10 +68,11 @@ export const useAuthStore = create<AuthState>()(
logout: () => {
const { refreshToken } = get()
if (refreshToken) {
authApi.logout(refreshToken).catch(console.error)
authApi.logout(refreshToken).catch((error) => {
console.error('[Auth] Logout API call failed:', error)
})
}
localStorage.removeItem('access_token')
localStorage.removeItem('refresh_token')
tokenStorage.clearTokens()
set({
accessToken: null,
refreshToken: null,
@@ -79,9 +84,14 @@ export const useAuthStore = create<AuthState>()(
checkAdminStatus: async () => {
try {
const token = tokenStorage.getAccessToken()
if (!token || !isTokenValid(token)) {
set({ isAdmin: false })
return
}
const response = await fetch('/api/cabinet/auth/me/is-admin', {
headers: {
Authorization: `Bearer ${localStorage.getItem('access_token')}`,
Authorization: `Bearer ${token}`,
},
})
if (response.ok) {
@@ -89,7 +99,7 @@ export const useAuthStore = create<AuthState>()(
set({ isAdmin: data.is_admin })
}
} catch (error) {
console.error('Failed to check admin status:', error)
console.error('[Auth] Failed to check admin status:', error)
set({ isAdmin: false })
}
},
@@ -99,20 +109,59 @@ export const useAuthStore = create<AuthState>()(
const user = await authApi.getMe()
set({ user })
} catch (error) {
console.error('Failed to refresh user:', error)
console.error('[Auth] Failed to refresh user:', error)
}
},
initialize: async () => {
// Защита от race condition - если уже идёт инициализация, ждём её завершения
if (isInitializing && initializePromise) {
return initializePromise
}
isInitializing = true
initializePromise = (async () => {
try {
set({ isLoading: true })
const accessToken = localStorage.getItem('access_token')
const refreshToken = localStorage.getItem('refresh_token')
// Миграция токенов из localStorage (для обратной совместимости)
tokenStorage.migrateFromLocalStorage()
const accessToken = tokenStorage.getAccessToken()
const refreshToken = tokenStorage.getRefreshToken()
if (!accessToken || !refreshToken) {
set({ isLoading: false, isAuthenticated: false })
return
}
// Проверяем валидность токена перед использованием
if (!isTokenValid(accessToken)) {
// Используем централизованный менеджер для refresh
const newToken = await tokenRefreshManager.refreshAccessToken()
if (newToken) {
const user = await authApi.getMe()
set({
accessToken: newToken,
refreshToken,
user,
isAuthenticated: true,
isLoading: false,
})
get().checkAdminStatus()
} else {
tokenStorage.clearTokens()
set({
accessToken: null,
refreshToken: null,
user: null,
isAuthenticated: false,
isLoading: false,
})
}
return
}
try {
const user = await authApi.getMe()
set({
@@ -122,27 +171,36 @@ export const useAuthStore = create<AuthState>()(
isAuthenticated: true,
isLoading: false,
})
// Check admin status
get().checkAdminStatus()
} catch (error) {
// Token might be expired, try to refresh
console.error('[Auth] getMe failed, trying refresh:', error)
// Token might be invalid on server, try to refresh
const newToken = await tokenRefreshManager.refreshAccessToken()
if (newToken) {
try {
const response = await authApi.refreshToken(refreshToken)
localStorage.setItem('access_token', response.access_token)
const user = await authApi.getMe()
set({
accessToken: response.access_token,
accessToken: newToken,
refreshToken,
user,
isAuthenticated: true,
isLoading: false,
})
// Check admin status
get().checkAdminStatus()
} catch {
} catch (userError) {
console.error('[Auth] getMe failed after refresh:', userError)
tokenStorage.clearTokens()
set({
accessToken: null,
refreshToken: null,
user: null,
isAuthenticated: false,
isLoading: false,
})
}
} else {
// Refresh failed, logout
localStorage.removeItem('access_token')
localStorage.removeItem('refresh_token')
tokenStorage.clearTokens()
set({
accessToken: null,
refreshToken: null,
@@ -152,12 +210,18 @@ export const useAuthStore = create<AuthState>()(
})
}
}
} finally {
isInitializing = false
initializePromise = null
}
})()
return initializePromise
},
loginWithTelegram: async (initData) => {
const response = await authApi.loginTelegram(initData)
localStorage.setItem('access_token', response.access_token)
localStorage.setItem('refresh_token', response.refresh_token)
tokenStorage.setTokens(response.access_token, response.refresh_token)
set({
accessToken: response.access_token,
refreshToken: response.refresh_token,
@@ -169,8 +233,7 @@ export const useAuthStore = create<AuthState>()(
loginWithTelegramWidget: async (data) => {
const response = await authApi.loginTelegramWidget(data)
localStorage.setItem('access_token', response.access_token)
localStorage.setItem('refresh_token', response.refresh_token)
tokenStorage.setTokens(response.access_token, response.refresh_token)
set({
accessToken: response.access_token,
refreshToken: response.refresh_token,
@@ -182,8 +245,7 @@ export const useAuthStore = create<AuthState>()(
loginWithEmail: async (email, password) => {
const response = await authApi.loginEmail(email, password)
localStorage.setItem('access_token', response.access_token)
localStorage.setItem('refresh_token', response.refresh_token)
tokenStorage.setTokens(response.access_token, response.refresh_token)
set({
accessToken: response.access_token,
refreshToken: response.refresh_token,

255
src/utils/token.ts Normal file
View File

@@ -0,0 +1,255 @@
/**
* Утилиты для безопасной работы с JWT токенами
*/
const TOKEN_KEYS = {
ACCESS: 'access_token',
REFRESH: 'refresh_token',
USER: 'user',
TELEGRAM_INIT: 'telegram_init_data',
} as const
interface JWTPayload {
exp?: number
iat?: number
sub?: string
[key: string]: unknown
}
/**
* Декодирует JWT токен без верификации подписи
* Используется только для чтения payload на клиенте
*/
export function decodeJWT(token: string): JWTPayload | null {
try {
const parts = token.split('.')
if (parts.length !== 3) return null
const payload = parts[1]
const decoded = atob(payload.replace(/-/g, '+').replace(/_/g, '/'))
return JSON.parse(decoded)
} catch {
return null
}
}
/**
* Проверяет, истёк ли срок действия токена
* @param token JWT токен
* @param bufferSeconds Буфер в секундах до истечения (по умолчанию 30 сек)
*/
export function isTokenExpired(token: string | null, bufferSeconds = 30): boolean {
if (!token) return true
const payload = decodeJWT(token)
if (!payload?.exp) return true
const now = Math.floor(Date.now() / 1000)
return payload.exp <= now + bufferSeconds
}
/**
* Проверяет, валиден ли токен (не истёк и корректный формат)
*/
export function isTokenValid(token: string | null): boolean {
if (!token) return false
return !isTokenExpired(token)
}
/**
* Безопасное хранилище токенов
* Использует sessionStorage вместо localStorage для защиты от XSS
* Токены не сохраняются между сессиями браузера
*/
export const tokenStorage = {
getAccessToken(): string | null {
try {
return sessionStorage.getItem(TOKEN_KEYS.ACCESS)
} catch {
return null
}
},
getRefreshToken(): string | null {
try {
return sessionStorage.getItem(TOKEN_KEYS.REFRESH)
} catch {
return null
}
},
setTokens(accessToken: string, refreshToken: string): void {
try {
sessionStorage.setItem(TOKEN_KEYS.ACCESS, accessToken)
sessionStorage.setItem(TOKEN_KEYS.REFRESH, refreshToken)
} catch {
console.error('Failed to save tokens to sessionStorage')
}
},
setAccessToken(accessToken: string): void {
try {
sessionStorage.setItem(TOKEN_KEYS.ACCESS, accessToken)
} catch {
console.error('Failed to save access token to sessionStorage')
}
},
clearTokens(): void {
try {
sessionStorage.removeItem(TOKEN_KEYS.ACCESS)
sessionStorage.removeItem(TOKEN_KEYS.REFRESH)
sessionStorage.removeItem(TOKEN_KEYS.USER)
// Также очищаем localStorage для миграции со старой версии
localStorage.removeItem(TOKEN_KEYS.ACCESS)
localStorage.removeItem(TOKEN_KEYS.REFRESH)
localStorage.removeItem(TOKEN_KEYS.USER)
} catch {
// ignore
}
},
/**
* Миграция токенов из localStorage в sessionStorage
* Вызывается при инициализации для обратной совместимости
*/
migrateFromLocalStorage(): void {
try {
const accessToken = localStorage.getItem(TOKEN_KEYS.ACCESS)
const refreshToken = localStorage.getItem(TOKEN_KEYS.REFRESH)
if (accessToken && !sessionStorage.getItem(TOKEN_KEYS.ACCESS)) {
sessionStorage.setItem(TOKEN_KEYS.ACCESS, accessToken)
}
if (refreshToken && !sessionStorage.getItem(TOKEN_KEYS.REFRESH)) {
sessionStorage.setItem(TOKEN_KEYS.REFRESH, refreshToken)
}
// Удаляем из localStorage после миграции
localStorage.removeItem(TOKEN_KEYS.ACCESS)
localStorage.removeItem(TOKEN_KEYS.REFRESH)
} catch {
// ignore
}
},
getTelegramInitData(): string | null {
try {
return sessionStorage.getItem(TOKEN_KEYS.TELEGRAM_INIT)
} catch {
return null
}
},
setTelegramInitData(data: string): void {
try {
sessionStorage.setItem(TOKEN_KEYS.TELEGRAM_INIT, data)
} catch {
// ignore
}
},
}
/**
* Централизованный менеджер обновления токенов
* Предотвращает множественные параллельные refresh запросы
*/
class TokenRefreshManager {
private isRefreshing = false
private refreshPromise: Promise<string | null> | null = null
private subscribers: ((token: string | null) => void)[] = []
private refreshEndpoint = '/api/cabinet/auth/refresh'
setRefreshEndpoint(endpoint: string): void {
this.refreshEndpoint = endpoint
}
/**
* Обновляет access token используя refresh token
* При множественных вызовах возвращает один и тот же Promise
*/
async refreshAccessToken(): Promise<string | null> {
// Если уже идёт refresh - возвращаем существующий Promise
if (this.isRefreshing && this.refreshPromise) {
return this.refreshPromise
}
const refreshToken = tokenStorage.getRefreshToken()
if (!refreshToken) {
return null
}
this.isRefreshing = true
this.refreshPromise = this.doRefresh(refreshToken)
try {
const result = await this.refreshPromise
this.notifySubscribers(result)
return result
} finally {
this.isRefreshing = false
this.refreshPromise = null
}
}
private async doRefresh(refreshToken: string): Promise<string | null> {
try {
const response = await fetch(this.refreshEndpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ refresh_token: refreshToken }),
})
if (!response.ok) {
throw new Error(`Refresh failed: ${response.status}`)
}
const data = await response.json()
const newAccessToken = data.access_token
if (newAccessToken) {
tokenStorage.setAccessToken(newAccessToken)
return newAccessToken
}
return null
} catch (error) {
console.error('[TokenRefreshManager] Refresh failed:', error)
return null
}
}
/**
* Подписка на результат refresh (для ожидающих запросов)
*/
subscribe(callback: (token: string | null) => void): () => void {
this.subscribers.push(callback)
return () => {
this.subscribers = this.subscribers.filter((cb) => cb !== callback)
}
}
private notifySubscribers(token: string | null): void {
this.subscribers.forEach((cb) => cb(token))
this.subscribers = []
}
/**
* Проверяет, идёт ли сейчас refresh
*/
get isRefreshInProgress(): boolean {
return this.isRefreshing
}
/**
* Ожидает завершения текущего refresh (если есть)
*/
async waitForRefresh(): Promise<string | null> {
if (this.refreshPromise) {
return this.refreshPromise
}
return tokenStorage.getAccessToken()
}
}
export const tokenRefreshManager = new TokenRefreshManager()