Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Autenticación: Vue.js + JWT
Search
Ignacio Anaya
November 02, 2017
Programming
0
1.1k
Autenticación: Vue.js + JWT
Esta charla muestra como podemos implementar autenticacion JWT en SPA's desarrolladas con Vue.js
Ignacio Anaya
November 02, 2017
Tweet
Share
More Decks by Ignacio Anaya
See All by Ignacio Anaya
Security is not a feature‼️
ianaya89
2
460
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
130
Security is not a feature!
ianaya89
1
340
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
110
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
270
Vue.js, PWA & The Subway Dilemma
ianaya89
0
170
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
120
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
98
Other Decks in Programming
See All in Programming
自力でTTSモデルを作った話
zgock999
0
100
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
React 19アップデートのために必要なこと
uhyo
8
1.5k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
200
Ruby on cygwin 2025-02
fd0
0
180
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
200
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.6k
PRレビューのお供にDanger
stoticdev
1
230
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
810
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
A designer walks into a library…
pauljervisheath
205
24k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
RailsConf 2023
tenderlove
29
1k
Transcript
Autenticación: Vue.js + JWT { Autenticación: Vue.js + JWT }
- @ianaya89 1
Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer &
Speaker > Embajador @Auth0 > Organizador @Vuenos_Aires { Autenticación: Vue.js + JWT } - @ianaya89 2
! Por Qué Token? — Sin Estado — Desacoplado —
Escalable { Autenticación: Vue.js + JWT } - @ianaya89 3
{ Autenticación: Vue.js + JWT } - @ianaya89 4
! Por Qué JWT? — Estandard — Seguro — Auto
Contenido — JSON ! { Autenticación: Vue.js + JWT } - @ianaya89 5
! JWT { Autenticación: Vue.js + JWT } - @ianaya89
6
! JWT ! Header { "alg": "HS256", "typ": "JWT" }
{ Autenticación: Vue.js + JWT } - @ianaya89 7
! JWT ! Payload { "sub": "1234567890", "name": "John Doe",
"admin": true, "iss": "https://api.com" } { Autenticación: Vue.js + JWT } - @ianaya89 8
! JWT ✍ Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload),
secret ) { Autenticación: Vue.js + JWT } - @ianaya89 9
! JWT ! Caso de Uso — SPA's — Serverless
— API's — Mobile — IoT { Autenticación: Vue.js + JWT } - @ianaya89 10
{ Autenticación: Vue.js + JWT } - @ianaya89 11
! Herramientias — Auth API — vue-router — trae (http
library) — localStorage { Autenticación: Vue.js + JWT } - @ianaya89 12
Auth Servidor = Seguridad Auth Cliente = UX { Autenticación:
Vue.js + JWT } - @ianaya89 13
! Auth API — Obtener JWT — Validar JWT —
node, express, jsonwebtoken, express-jwt { Autenticación: Vue.js + JWT } - @ianaya89 14
! vue-router — SPA's — 1 route = 1 component
{ Autenticación: Vue.js + JWT } - @ianaya89 15
! vue-router Routes Meta const router = new Router({ routes:
[{ path: '/', component: Home }, { path: '/login', component: Login, meta: { isPublic: true } }] }) { Autenticación: Vue.js + JWT } - @ianaya89 16
! vue-router Guardian Navs router.beforeEach((to, from, next) => { //
resolver si el usuario esta logueado if (!to.meta.isPublic && !isAuthenticated()) { return next('login') } next() }) { Autenticación: Vue.js + JWT } - @ianaya89 17
! trae — Libreria HTTP — Fetch Wrapper (con esteroides)
— Similar axios — Usa Promises { Autenticación: Vue.js + JWT } - @ianaya89 18
! trae Ejemplo import trae from 'trae' trae.baseUrl('http://api:com') trae.get('/', {})
.then(res => console.log(res.data)) .catch(err => console.log('[ERROR]', err)) { Autenticación: Vue.js + JWT } - @ianaya89 19
! trae Middlewares trae.before((config) => { const token = '123456789'
config.headers['Authentication'] = token return config }) { Autenticación: Vue.js + JWT } - @ianaya89 20
! localStorage trae.post('/auth', { email, password }) .then(res => {
localStorage.token = res.data localStorage.user = atob(res.data.split('.')[1]) }) .catch(err => console.log('[ERROR]', err)) { Autenticación: Vue.js + JWT } - @ianaya89 21
! Demo — API — Web App { Autenticación: Vue.js
+ JWT } - @ianaya89 22
! Más! — jwt.io — Auth0 — jwt-handbook — trae
— vue-router { Autenticación: Vue.js + JWT } - @ianaya89 23
Preguntas? { Autenticación: Vue.js + JWT } - @ianaya89 24
! Gracias! @ianaya89 { Autenticación: Vue.js + JWT } -
@ianaya89 25