Implementando autenticación usando jwt #28 #31
2
.env.example
Normal file
2
.env.example
Normal file
@@ -0,0 +1,2 @@
|
||||
VITE_API_IMPLEMENTATION=django
|
||||
VITE_DJANGO_BASE_URL=http://localhost:7000
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -5,6 +5,7 @@ node_modules
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
.env
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
|
||||
81
AGENTS.md
Normal file
81
AGENTS.md
Normal file
@@ -0,0 +1,81 @@
|
||||
# Don Confiao - Frontend
|
||||
|
||||
## Tech Stack
|
||||
- **Framework:** Vue 3 (Composition API)
|
||||
- **UI Library:** Vuetify 3
|
||||
- **Routing:** Vue Router 4 (auto-routes con `unplugin-vue-router`)
|
||||
- **State:** Pinia
|
||||
- **HTTP:** Axios
|
||||
- **Build:** Vite
|
||||
- **Linting:** ESLint
|
||||
|
||||
## Project Structure
|
||||
```
|
||||
src/
|
||||
├── assets/ # Imágenes, iconos estáticos
|
||||
├── components/ # Componentes Vue reutilizables
|
||||
├── layouts/ # Layouts de página
|
||||
├── pages/ # Vistas (auto-routed desde文件名)
|
||||
├── plugins/ # Configuración de Vuetify, etc.
|
||||
├── router/ # Configuración de rutas
|
||||
├── services/ # API services (auth.js, etc.)
|
||||
├── stores/ # Pinia stores
|
||||
└── styles/ # SCSS settings
|
||||
```
|
||||
|
||||
## Important Conventions
|
||||
|
||||
### Auto-imports
|
||||
- Componentes en `src/components/` se auto-importan por nombre
|
||||
- Los archivos en `src/pages/*.vue` se routing automáticamente via `unplugin-vue-router`
|
||||
- Alias `@` = `src/`
|
||||
|
||||
### Pages (CRITICAL)
|
||||
**Siempre importar componentes en los archivos de página:**
|
||||
```vue
|
||||
<template>
|
||||
<MiComponente />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MiComponente from '@/components/MiComponente.vue';
|
||||
</script>
|
||||
```
|
||||
|
||||
### Componentes
|
||||
- Usar Composition API (`<script setup>` o `export default { }`)
|
||||
- Naming: PascalCase (ej: `LoginDialog.vue`, `CartGrid.vue`)
|
||||
- Componentes de página van en `pages/`, componentes reutilizables en `components/`
|
||||
|
||||
### Servicios API
|
||||
- Ubicación: `src/services/`
|
||||
- Usar Axios para HTTP requests
|
||||
- JWT tokens en localStorage (`access_token`, `refresh_token`)
|
||||
|
||||
### Routing
|
||||
- Rutas automáticas basadas en archivos en `src/pages/`
|
||||
- No requiere configuración manual en `router/index.js`
|
||||
|
||||
## Environment Variables
|
||||
- `VITE_DJANGO_BASE_URL` - URL del backend Django
|
||||
|
||||
## Commands
|
||||
```bash
|
||||
npm run dev # Desarrollo (puerto 3000)
|
||||
npm run build # Producción
|
||||
npm run preview # Preview build
|
||||
npm run lint # ESLint fix
|
||||
```
|
||||
|
||||
## Common Issues
|
||||
1. **Página en blanco:** Verificar que los componentes en `src/pages/*.vue` tengan import explícito
|
||||
2. **Errores de lint:** Ejecutar `npm run lint`
|
||||
|
||||
## Git Commits
|
||||
**Antes de hacer commit:**
|
||||
1. Pedir permiso al usuario
|
||||
2. Mostrar resumen de los cambios que se incluirán
|
||||
|
||||
**Formato de mensajes:**
|
||||
- Usar prefijo `#<numero>` para referenciar el issue (ej: `#28 feat: add login` donde #28 es el número del issue en GitHub/GitLab)
|
||||
- Prefijos válidos: `feat`, `fix`, `chore`, `docs`, `refactor`, `style`
|
||||
220
package-lock.json
generated
220
package-lock.json
generated
@@ -9,6 +9,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@mdi/font": "7.4.47",
|
||||
"axios": "^1.13.5",
|
||||
"core-js": "^3.37.1",
|
||||
"roboto-fontface": "*",
|
||||
"vee-validate": "^4.14.6",
|
||||
@@ -1503,6 +1504,12 @@
|
||||
"node": ">=16.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
@@ -1519,6 +1526,17 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.13.5",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
|
||||
"integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.11",
|
||||
"form-data": "^4.0.5",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-eslint": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
|
||||
@@ -1667,6 +1685,19 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
@@ -1752,6 +1783,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@@ -1941,6 +1984,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/doctrine": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
||||
@@ -1954,6 +2006,20 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||
@@ -2028,14 +2094,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
|
||||
"integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
|
||||
"dev": true,
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.2.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
@@ -2044,17 +2106,15 @@
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
|
||||
"integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
|
||||
"dev": true,
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
@@ -2064,15 +2124,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/es-set-tostringtag": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
|
||||
"integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
|
||||
"dev": true,
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
||||
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.2.4",
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.6",
|
||||
"has-tostringtag": "^1.0.2",
|
||||
"hasown": "^2.0.1"
|
||||
"hasown": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -2851,6 +2911,26 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@@ -2861,6 +2941,22 @@
|
||||
"is-callable": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
|
||||
"integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@@ -2886,7 +2982,6 @@
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@@ -2922,17 +3017,21 @@
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
|
||||
"integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
|
||||
"dev": true,
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"has-proto": "^1.0.1",
|
||||
"has-symbols": "^1.0.3",
|
||||
"hasown": "^2.0.0"
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -2941,6 +3040,19 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/get-symbol-description": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
|
||||
@@ -3041,13 +3153,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
|
||||
"integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
|
||||
"dev": true,
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"get-intrinsic": "^1.1.3"
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
@@ -3107,10 +3218,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
|
||||
"integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
|
||||
"dev": true,
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -3123,7 +3233,6 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.3"
|
||||
@@ -3139,7 +3248,6 @@
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
@@ -3721,6 +3829,15 @@
|
||||
"node": ">=16.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/merge2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||
@@ -3745,6 +3862,27 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@@ -4206,6 +4344,12 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "7.4.47",
|
||||
"axios": "^1.13.5",
|
||||
"core-js": "^3.37.1",
|
||||
"roboto-fontface": "*",
|
||||
"vee-validate": "^4.14.6",
|
||||
|
||||
70
src/components/Login.vue
Normal file
70
src/components/Login.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<h1>Login</h1>
|
||||
|
||||
<v-form ref="loginForm" @submit.prevent="onSubmit">
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
label="Usuario"
|
||||
:rules="[requiredRule]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
label="Contraseña"
|
||||
type="password"
|
||||
:rules="[requiredRule]"
|
||||
required
|
||||
/>
|
||||
|
||||
<v-btn type="submit" color="primary">Entrar</v-btn>
|
||||
|
||||
<v-alert v-if="error" type="error" class="mt-2">{{ error }}</v-alert>
|
||||
</v-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthService from '@/services/auth';
|
||||
|
||||
export default {
|
||||
name: 'DonConfiao',
|
||||
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
error: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
requiredRule(value) {
|
||||
return !!value || 'Este campo es obligatorio';
|
||||
},
|
||||
|
||||
async onSubmit() {
|
||||
this.error = '';
|
||||
|
||||
const form = this.$refs.loginForm;
|
||||
const isValid = await form.validate();
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
if (!this.username || !this.password) {
|
||||
this.error = 'Usuario y contraseña son obligatorios';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await AuthService.login({
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
});
|
||||
this.$router.push({ path: '/' });
|
||||
} catch (e) {
|
||||
const msg = e?.response?.data?.message ?? e.message;
|
||||
this.error = msg ?? 'Error al iniciar sesión';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
69
src/components/LoginDialog.vue
Normal file
69
src/components/LoginDialog.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<v-dialog v-model="show" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Iniciar sesión</v-card-title>
|
||||
<v-card-text>
|
||||
<v-form ref="form" @submit.prevent="onSubmit">
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
label="Usuario"
|
||||
:rules="[required]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
label="Contraseña"
|
||||
type="password"
|
||||
:rules="[required]"
|
||||
required
|
||||
/>
|
||||
<v-alert v-if="error" type="error" class="mt-2">{{ error }}</v-alert>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn text @click="show = false">Cancelar</v-btn>
|
||||
<v-btn color="primary" @click="onSubmit">Entrar</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthService from '@/services/auth';
|
||||
|
||||
export default {
|
||||
name: 'LoginDialog',
|
||||
data: () => ({
|
||||
show: false,
|
||||
username: '',
|
||||
password: '',
|
||||
error: '',
|
||||
}),
|
||||
methods: {
|
||||
required(v) {
|
||||
return !!v || 'Campo obligatorio';
|
||||
},
|
||||
async onSubmit() {
|
||||
this.error = '';
|
||||
const form = this.$refs.form;
|
||||
if (!(await form.validate())) return;
|
||||
|
||||
try {
|
||||
await AuthService.login({
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
});
|
||||
this.show = false;
|
||||
this.$emit('login-success');
|
||||
} catch (e) {
|
||||
this.error = e.message ?? 'Error al iniciar sesión';
|
||||
}
|
||||
},
|
||||
open() {
|
||||
this.show = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
32
src/components/Logout.vue
Normal file
32
src/components/Logout.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<v-container class="d-flex flex-column align-center justify-center" style="height: 100vh;">
|
||||
<v-progress-circular indeterminate color="primary" />
|
||||
<p class="mt-4">Cerrando sesión…</p>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthService from '@/services/auth';
|
||||
|
||||
export default {
|
||||
name: 'DonConfiao',
|
||||
mounted() {
|
||||
this.logout();
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
AuthService.logout();
|
||||
this.$router.push({
|
||||
path: '/autenticarse'
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
@@ -3,11 +3,22 @@
|
||||
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title>Menu</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<template v-if="$vuetify.display.mdAndUp">
|
||||
<v-btn icon="mdi-magnify" variant="text"></v-btn>
|
||||
<v-btn icon="mdi-filter" variant="text"></v-btn>
|
||||
</template>
|
||||
<v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
|
||||
<v-btn
|
||||
v-if="!isAuthenticated"
|
||||
prepend-icon="mdi-login"
|
||||
variant="text"
|
||||
@click="navigate('/autenticarse')"
|
||||
>
|
||||
Login
|
||||
</v-btn>
|
||||
<v-btn
|
||||
v-else
|
||||
prepend-icon="mdi-logout"
|
||||
variant="text"
|
||||
@click="logout"
|
||||
>
|
||||
Logout
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
<v-navigation-drawer v-model="drawer"
|
||||
:location="$vuetify.display.mobile ? 'bottom' : undefined"
|
||||
@@ -41,12 +52,14 @@
|
||||
|
||||
<script>
|
||||
import trytonIcon from '../assets/icons/tryton-icon.svg';
|
||||
import AuthService from '@/services/auth';
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
data: () => ({
|
||||
drawer: false,
|
||||
group: null,
|
||||
showAdminMenu: false,
|
||||
isAuthenticated: false,
|
||||
menuItems: [
|
||||
{ title: 'Inicio', route: '/', icon: 'mdi-home'},
|
||||
{ title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
|
||||
@@ -61,12 +74,21 @@
|
||||
{ title: 'Actualizar Ventas Tryton', route: '/sincronizar_ventas_tryton', icon: 'trytonIcon'}
|
||||
],
|
||||
}),
|
||||
mounted() {
|
||||
this.checkAuth();
|
||||
},
|
||||
watch: {
|
||||
group () {
|
||||
this.drawer = false
|
||||
},
|
||||
$route() {
|
||||
this.checkAuth();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkAuth() {
|
||||
this.isAuthenticated = AuthService.isAuthenticated();
|
||||
},
|
||||
navigate(route) {
|
||||
this.$router.push(route);
|
||||
},
|
||||
@@ -77,6 +99,11 @@
|
||||
toggleAdminMenu() {
|
||||
this.showAdminMenu = !this.showAdminMenu;
|
||||
},
|
||||
logout() {
|
||||
AuthService.logout();
|
||||
this.isAuthenticated = false;
|
||||
this.$router.push('/');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
7
src/pages/autenticarse.vue
Normal file
7
src/pages/autenticarse.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Login />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//
|
||||
</script>
|
||||
7
src/pages/salir.vue
Normal file
7
src/pages/salir.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Logout />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//
|
||||
</script>
|
||||
72
src/services/auth.js
Normal file
72
src/services/auth.js
Normal file
@@ -0,0 +1,72 @@
|
||||
class AuthService {
|
||||
static TOKEN_KEY = 'access_token';
|
||||
static REFRESH_KEY = 'refresh_token';
|
||||
|
||||
static async login(credentials) {
|
||||
const url = `${import.meta.env.VITE_DJANGO_BASE_URL}/api/token/`;
|
||||
|
||||
const resp = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(credentials),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
let errMsg = resp.statusText;
|
||||
try {
|
||||
const errData = await resp.json();
|
||||
errMsg = errData?.detail ?? errData?.message ?? errMsg;
|
||||
} catch (_) { /* ignore */ }
|
||||
throw new Error(errMsg);
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.access && data.refresh) {
|
||||
localStorage.setItem(this.TOKEN_KEY, data.access);
|
||||
localStorage.setItem(this.REFRESH_KEY, data.refresh);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
static getAccessToken() {
|
||||
return localStorage.getItem(this.TOKEN_KEY);
|
||||
}
|
||||
|
||||
static getRefreshToken() {
|
||||
return localStorage.getItem(this.REFRESH_KEY);
|
||||
}
|
||||
|
||||
static async refresh() {
|
||||
const refresh = this.getRefreshToken();
|
||||
if (!refresh) throw new Error('No refresh token');
|
||||
|
||||
const url = `${import.meta.env.VITE_DJANGO_BASE_URL}/api/token/refresh/`;
|
||||
const resp = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ refresh }),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const errData = await resp.json().catch(() => ({}));
|
||||
throw new Error(errData?.detail ?? resp.statusText);
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
localStorage.setItem(this.TOKEN_KEY, data.access);
|
||||
return data.access;
|
||||
}
|
||||
|
||||
static isAuthenticated() {
|
||||
return !!this.getAccessToken();
|
||||
}
|
||||
|
||||
static logout() {
|
||||
localStorage.removeItem(this.TOKEN_KEY);
|
||||
localStorage.removeItem(this.REFRESH_KEY);
|
||||
}
|
||||
}
|
||||
|
||||
export default AuthService;
|
||||
@@ -1,8 +1,19 @@
|
||||
import AuthService from '@/services/auth';
|
||||
import http from '@/services/http';
|
||||
|
||||
class DjangoApi {
|
||||
constructor() {
|
||||
this.base = import.meta.env.VITE_DJANGO_BASE_URL;
|
||||
}
|
||||
|
||||
getRequest(url) {
|
||||
return http.get(url).then(r => r.data);
|
||||
}
|
||||
|
||||
postRequest(url, payload) {
|
||||
return http.post(url, payload).then(r => r.data);
|
||||
}
|
||||
|
||||
getCustomers() {
|
||||
const url = this.base + '/don_confiao/api/customers/';
|
||||
return this.getRequest(url);
|
||||
@@ -77,45 +88,6 @@ class DjangoApi {
|
||||
const url = this.base + '/don_confiao/api/enviar_ventas_a_tryton';
|
||||
return this.postRequest(url, {});
|
||||
}
|
||||
|
||||
getRequest(url) {
|
||||
return new Promise ((resolve, reject) => {
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
resolve(data);
|
||||
})
|
||||
.catch(error => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
postRequest(url, content) {
|
||||
return new Promise((resolve, reject) => {
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(content)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
reject(new Error(`Error ${response.status}: ${response.statusText}`));
|
||||
} else {
|
||||
response.json().then(data => {
|
||||
if (!data) {
|
||||
reject(new Error('La respuesta no es un JSON válido'));
|
||||
} else {
|
||||
resolve(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => reject(error));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default DjangoApi;
|
||||
|
||||
44
src/services/http.js
Normal file
44
src/services/http.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import axios from 'axios';
|
||||
import AuthService from '@/services/auth';
|
||||
|
||||
const http = axios.create({
|
||||
baseURL: import.meta.env.VITE_DJANGO_BASE_URL,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
http.interceptors.request.use(
|
||||
config => {
|
||||
const token = AuthService.getAccessToken();
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
error => Promise.reject(error)
|
||||
);
|
||||
|
||||
http.interceptors.response.use(
|
||||
response => response,
|
||||
async error => {
|
||||
const originalRequest = error.config;
|
||||
|
||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||
originalRequest._retry = true;
|
||||
try {
|
||||
const newAccess = await AuthService.refresh();
|
||||
originalRequest.headers.Authorization = `Bearer ${newAccess}`;
|
||||
return http.request(originalRequest);
|
||||
} catch (refreshError) {
|
||||
AuthService.logout();
|
||||
window.location.href = '/autenticarse';
|
||||
return Promise.reject(refreshError);
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default http;
|
||||
@@ -50,7 +50,7 @@ export default defineConfig({
|
||||
} },
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
extensions: [
|
||||
'.js',
|
||||
|
||||
Reference in New Issue
Block a user