157 lines
4.3 KiB
Markdown
157 lines
4.3 KiB
Markdown
|
# Resumo da Migração: Portal Angular → React
|
||
|
|
|
||
|
|
## ✅ O que foi implementado:
|
||
|
|
|
||
|
|
### 1. Arquivos de Configuração
|
||
|
|
|
||
|
|
#### `.env` e `.env.example`
|
||
|
|
- Variáveis de ambiente extraídas do portal Angular
|
||
|
|
- URLs da API (principal e PIX)
|
||
|
|
- Configurações do Firebase
|
||
|
|
- Domínio padrão (@jurunense.com.br)
|
||
|
|
|
||
|
|
#### `src/config/env.ts`
|
||
|
|
- Configuração centralizada de variáveis de ambiente
|
||
|
|
- Acesso tipado às configurações
|
||
|
|
- Valores padrão caso variáveis não estejam definidas
|
||
|
|
|
||
|
|
### 2. Sistema de Autenticação
|
||
|
|
|
||
|
|
#### `src/types/auth.ts`
|
||
|
|
- Tipos TypeScript para autenticação
|
||
|
|
- Interfaces: `AuthUser`, `User`, `LoginResponse`, `ResultApi`, `AuthContextType`
|
||
|
|
|
||
|
|
#### `src/services/auth.service.ts`
|
||
|
|
- Serviço completo de autenticação
|
||
|
|
- Métodos:
|
||
|
|
- `login()`: Realiza login com processamento de email/senha
|
||
|
|
- `authenticate()`: Autenticação para autorizações especiais
|
||
|
|
- `saveToken()` / `getToken()`: Gerenciamento de token
|
||
|
|
- `saveUser()` / `getUser()`: Gerenciamento de usuário
|
||
|
|
- `clearAuth()`: Limpa dados de autenticação
|
||
|
|
- `isAuthenticated()`: Verifica autenticação
|
||
|
|
- `isManager()`: Verifica se é gerente (via JWT)
|
||
|
|
- `getAuthHeaders()`: Headers para requisições autenticadas
|
||
|
|
|
||
|
|
#### `src/contexts/AuthContext.tsx`
|
||
|
|
- Contexto React para estado global de autenticação
|
||
|
|
- Provider: `AuthProvider`
|
||
|
|
- Hook: `useAuth()`
|
||
|
|
- Funcionalidades:
|
||
|
|
- Estado de autenticação
|
||
|
|
- Login/Logout
|
||
|
|
- Acesso a dados do usuário
|
||
|
|
- Carregamento automático do localStorage
|
||
|
|
|
||
|
|
### 3. Integração com a Aplicação
|
||
|
|
|
||
|
|
#### `index.tsx`
|
||
|
|
- Envolvido com `AuthProvider` para disponibilizar contexto global
|
||
|
|
|
||
|
|
#### `App.tsx`
|
||
|
|
- Integrado com `useAuth()`
|
||
|
|
- Redirecionamento automático baseado em autenticação
|
||
|
|
- Uso de dados reais do usuário autenticado
|
||
|
|
|
||
|
|
#### `views/LoginView.tsx`
|
||
|
|
- Formulário de login funcional
|
||
|
|
- Integração com `useAuth()`
|
||
|
|
- Validação de campos
|
||
|
|
- Tratamento de erros
|
||
|
|
- Loading state
|
||
|
|
- Toggle de visibilidade de senha
|
||
|
|
|
||
|
|
## 🔄 Fluxo de Autenticação
|
||
|
|
|
||
|
|
1. Usuário preenche email e senha no `LoginView`
|
||
|
|
2. Email é processado (domínio adicionado, UPPERCASE)
|
||
|
|
3. Senha é convertida para UPPERCASE
|
||
|
|
4. Requisição POST para `/auth/login`
|
||
|
|
5. Resposta contém token JWT e dados do usuário
|
||
|
|
6. Dados são salvos no localStorage
|
||
|
|
7. Context atualiza estado global
|
||
|
|
8. App redireciona para menu principal
|
||
|
|
|
||
|
|
## 📋 Características Implementadas
|
||
|
|
|
||
|
|
### Processamento de Credenciais
|
||
|
|
- ✅ Email: domínio `@jurunense.com.br` adicionado automaticamente
|
||
|
|
- ✅ Email e senha convertidos para UPPERCASE
|
||
|
|
- ✅ Validação mínima de senha (3 caracteres)
|
||
|
|
|
||
|
|
### Armazenamento
|
||
|
|
- ✅ Token JWT no localStorage
|
||
|
|
- ✅ Dados do usuário no localStorage
|
||
|
|
- ✅ Limpeza de carrinho ao fazer login
|
||
|
|
|
||
|
|
### Funcionalidades do Usuário
|
||
|
|
- ✅ Obter store, seller, supervisor, deliveryTime
|
||
|
|
- ✅ Verificar se é gerente (via JWT)
|
||
|
|
- ✅ Headers de autorização para requisições
|
||
|
|
|
||
|
|
## 🔧 Como Usar
|
||
|
|
|
||
|
|
### 1. Configurar Variáveis de Ambiente
|
||
|
|
|
||
|
|
Copie `.env.example` para `.env` e ajuste se necessário:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cp .env.example .env
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. Usar o Hook de Autenticação
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { useAuth } from './src/contexts/AuthContext';
|
||
|
|
|
||
|
|
function MyComponent() {
|
||
|
|
const {
|
||
|
|
user,
|
||
|
|
isAuthenticated,
|
||
|
|
isLoading,
|
||
|
|
login,
|
||
|
|
logout
|
||
|
|
} = useAuth();
|
||
|
|
|
||
|
|
// Seu código aqui
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3. Fazer Requisições Autenticadas
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { authService } from './src/services/auth.service';
|
||
|
|
|
||
|
|
const headers = authService.getAuthHeaders();
|
||
|
|
const response = await fetch(`${API_URL}endpoint`, {
|
||
|
|
method: 'GET',
|
||
|
|
headers
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## 📝 Próximos Passos Sugeridos
|
||
|
|
|
||
|
|
1. **Interceptors HTTP**: Criar interceptor para adicionar token automaticamente
|
||
|
|
2. **Refresh Token**: Implementar renovação automática de token
|
||
|
|
3. **Rotas Protegidas**: Implementar proteção de rotas baseada em autenticação
|
||
|
|
4. **Tratamento de Expiração**: Detectar e tratar expiração de token
|
||
|
|
5. **Testes**: Adicionar testes unitários e de integração
|
||
|
|
|
||
|
|
## ⚠️ Notas Importantes
|
||
|
|
|
||
|
|
- O sistema mantém compatibilidade total com a API do portal Angular
|
||
|
|
- Token é armazenado no localStorage (considerar httpOnly cookies em produção)
|
||
|
|
- Todas as credenciais são enviadas em UPPERCASE (padrão do sistema)
|
||
|
|
- O arquivo `.env` não deve ser versionado
|
||
|
|
|
||
|
|
## 🔗 Compatibilidade
|
||
|
|
|
||
|
|
- ✅ Mesma API do portal Angular
|
||
|
|
- ✅ Mesmos endpoints de autenticação
|
||
|
|
- ✅ Mesmo formato de resposta
|
||
|
|
- ✅ Mesmo processamento de credenciais
|
||
|
|
- ✅ Mesmo armazenamento (localStorage)
|
||
|
|
|
||
|
|
|
||
|
|
|