angular routing security

Gestión de usuario activo

Autenticación basada en token

2
1 valida user / password
user / password
genera token__
token
3
5
4
request (header: token) valida token__
response data
6
Diseño de la aplicación
AppAngular
Pages (routes)

/login
Login Home Users UserEdit Error
/me

/users
/users/:id

...
¿Cómo puedo autenticar a un usuario y definir sus
datos?

- Almacenamiento de token
- Presencia de usuario en la aplicación
AppAngular
Pages (routes)

/login
Login Home Users UserEdit Error
/me

/users
/users/:id

Services ...
auth

login( user, pass )

initCurrentUser( token )

logout()

{
currentUser { token
id, name, email, roles...
}
}
¿Cómo puedo enviar el token de manera
automática en las llamadas http?

- Definición de cabeceras en el interceptor http

AppAngular

HTTP_INTERCEPTOR
Pages (routes)

/login
Login Home Users UserEdit Error
/me

/users
/users/:id

Services ...
auth

login( user, pass )

initCurrentUser( token )

logout()

{
currentUser { token
id, name, email, roles...
}
}
¿Cómo puedo hacer que el usuario esté presente
cuando vuelva a abrir la aplicación?

- Inicialización al abrir la aplicación

 AppAngular

HTTP_INTERCEPTOR
Pages (routes)
APP_INITIALIZER

/login
Login Home Users UserEdit Error
/me

/users
/users/:id

Services ...
auth

login( user, pass )

initCurrentUser( token )

logout()

{
currentUser { token
id, name, email, roles...
}
}
¿Cómo puedo denegar el acceso a cierta páginas
según el rol del usuario?

- Configuración de Router Guard

 AppAngular

HTTP_INTERCEPTOR
Pages (routes)
APP_INITIALIZER

/login
Login Home Users UserEdit Error
/me
canActivate canActivate canActivate
- admin - admin - admin
- user - user /users
/users/:id

Services ...

authGuard
auth

login( user, pass ) canActivate

initCurrentUser( token )

logout()

{
currentUser { token
id, name, email, roles...
}
}
¿Cómo puede refrescar un token caducado de
manera transparente al usuario?

- Recuperar token mediante refreshToken

Autenticación basada en token
2
1 valida user / password
user / password
genera tokens_
tokens
3
5
4
request (header: token) valida token__
response 401
6
8
7 valida refreshToken
refreshToken
genera tokens_
tokens
9
11
10
request (header: token)
valida token__
response data
12
 AppAngular

HTTP_INTERCEPTOR
Pages (routes)
APP_INITIALIZER

/login
Login Home Users UserEdit Error
/me
canActivate canActivate canActivate
- admin - admin - admin
- user - user /users
/users/:id

Services ...

authGuard
auth

login( user, pass ) canActivate

initCurrentUser( token )

logout()

refreshToken( refreshToken )

{
currentUser { token,
id, name, email, roles...
refreshToken
}
}
¿Algo más?

- Directivas estructurales de seguridad

- BaseComponent
Posibles mejoras

- Guardar tokens en el AuthService

- Posibilidad de no guardar token en storage
- Utilizar MobX para los cambios del usuario
- ...
https://gitlab.ic.es.atos.net/angular-seedprojects/angular-routing-security
¡¡ Muchas gracias !!
Néstor D. Camacho Delgado