none
Cuando presiono F5, y mi usuario esta logeado, pierdo la informacion y me envia de nuevo al Login RRS feed

  • Pregunta

  • Buen dia para todos, soy muy nuevo en esto del angular, estoy teniendo un inconveniente bastante, grande, y es que cuando logro logear mi usuario, funciona perfecto, navega por la paginas que tienen la restriccion de autorizacion desde mi controlador en Web Api con [Authorize], pero cuando presiono F5 o Ctrl + R, me devuelve a mi pagina de Inicio de Sesion

    llevo mucho tiempo tratando de solucionar esto y no he sido capaz, no se que es lo que se debe hacer, ya guardo mi usuario, y mi token a travez de la aplicacion, lo hice con un servicio, y tambien con cookies, pero no se que me esta faltando para que cuando le de F5 o Ctrl + R, no me regrese a mi pagina de inicio

    les agradezco enormemente la ayuda que me puedan brindar ya que necesito solucionar este tema rapidamente

    sábado, 22 de octubre de 2016 18:46

Todas las respuestas

  • hola

    >>ya guardo mi usuario, y mi token a travez de la aplicacion,

    donde lo guardas ? porque deberias hacerlo en el storage de html5

    HTML5 Local Storage

    angular tiene el ngStorage para poder guardar alli el token de seguridad

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 24 de octubre de 2016 6:32
  • Hola leandro gracias por contestar, de momento lo estoy guardando con $cookies para efecto de las pruebas, lo tendre en cuenta con el localstore como mencionas, pero aun guardando el token no se que mas hacer, me podrias dar un ejemplo completo de cuales son los pasos y que debo hacer. yo me autentico, no tengo problemas con eso, depues de eso tengo un servicio .factory que invoco solo para hacer el manejo de los metodos de $cookies put, get, etc..

    supongo que el siguiente codigo debe ir en mi modulo, pero no se que codigo debe ir, te agradezco un ejemplo completo

    lunes, 24 de octubre de 2016 13:44
  • Y "quien" o qué controla que vayas a la página de inicio? ¿En el web.config tienes puesto <authentication mode="forms" y la página de inicio de sesión? o lo controlas en el cliente con código en angular?

    A mi me da la sensación de que lo que ocurre es que toda la lógica de si el usuario está logeado o no la realizas en angular. El problema es que si el usuario pulsa F5 todo el estado, absolutamente todo el estado, con todas sus variables, servicios, etc, se pierde.

    Cuando no queremos usar la autenticación clásica de ASP.NET, es decir, esa en la que cuando el usuario no está logeado se redirecciona a la página de login, en una aplicación ángular, lo que debemos hacer para evitar el problema del F5, es tener en nuestro web api una acción que nos devuelva el usuario autenticado, si la autenticación está basada en cookies, no abrá problema al hacer F5 ya que la cookie se envía al servidor. Desde ángular, en el bootstraping de la aplicación, llamamos a esta web api si nos devuelve el usuario anónimo lo llevamos a la pantalla de login, si no, pues no.

    Por cierto, no es buena idea reinvertar la rueda con las autenticaciones. Es decir, es mala idea que andes con cookies que tu mismo creas para controlar la autenticación. Todo está ya inventado. Es mejor usar FormsAuthentication.SetAuthCookie que envía una cookie cifrada con la clave de cifrado de la máquina, mucho más segura que tus cookies hechas a mano.


    • Editado Jesús López lunes, 24 de octubre de 2016 14:14 expandir
    lunes, 24 de octubre de 2016 14:09
  • Hola Jesus.

    "Y "quien" o qué controla que vayas a la página de inicio? ¿En el web.config tienes puesto <authentication mode="forms" y la página de inicio de sesión? o lo controlas en el cliente con código en angular?"

    Rta. lo que controla que vaya a mi pagina de Login es $routeProvider en mi modulo de angular.

    "lo que debemos hacer para evitar el problema del F5, es tener en nuestro web api una acción que nos devuelva el usuario autenticado, si la autenticación está basada en cookies, no abrá problema al hacer F5 ya que la cookie se envía al servidor. Desde ángular, en el bootstraping de la aplicación, llamamos a esta web api si nos devuelve el usuario anónimo lo llevamos a la pantalla de login, si no, pues no."

    Rta. te entiendo que debo hacer una consulta al servidor cada vez que mi cliente refresque la pagina? esto es productivo?

    Averiguare mas sobre FormsAuthentication.SetAuthCookie, la verdad soy demasiado nuevo en el tema.

    Gracias por tomarte la molestia de responder

    lunes, 24 de octubre de 2016 14:41
  • Puedes hacer una consulta al servidor cada vez que el usuario resfresque la página, o la propia página podría incluir en una etiqueta <script> los datos del usuario logeado. Esto lo puedes hacer con Razor.

    Hay dos artículos buenos para resolver el tema de cargar datos del servidor antes de iniciar la aplicación angular. El primero hace una petición ajax antes de iniciar el angular (angular bootstraping). El segundo incluye en una etiqueta <script> en una vista Razor los datos:

    Asynchronously Bootstrapping AngularJS Applications with Server-Side Data

    Bootstrapping AngularJS Applications with Server-Side Data from ASP.NET MVC & Razor

    Si la página de login la controla angular, sólo tienes las dos opciones que se explican en estos artículos.

    La otra opción es tener por un lado la aplicación angular como (Single Page Application) y otra página independiente de login, y manejar la autenticación de forma clásica con el web.config.



    lunes, 24 de octubre de 2016 15:03
  • hola

    >>depues de eso tengo un servicio .factory que invoco solo para hacer el manejo de los metodos de $cookies put, get, etc..

    pero desde ese factory es que redireccionas al login ?

    porque entiendo que el factory seria el service que inyectas al controller de angular, si es asi el servicio entonces esta usando $http y es alli donde ingresas el header de autenticacion con el token

    deberias poner algun breakpoint o console.log() para ver que pasa con el token en ese punto

    El servicio que invocas es un web api, no ? obtienes un token como ser

     Securing ASP.NET Web API using Token Based Authentication and using it in Angular.js application

    o sea implementas el UseOAuthBearerTokens, no ?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina



    lunes, 24 de octubre de 2016 17:05
  • Hola Leandro ya estoy usando el ngStorage, que me mencionaste gracias,  como tu ya sabes, ya puedo guardar el token, cuando tu dices "y es alli en donde ingresar el header de autenticacion con el token" te refieres a que ya no debo ir al server una vez mas, si no que yo ya tengo las credenciales de autenticacion por asi decirlo.

    como hago lo del header? me imagino que eso que tu dices lo debo de hacer en mi angular.module('app',[]) como ingreso el header. me podrias dar un ejemplo.

    gracias por tomarte el tiempo de responder

    lunes, 24 de octubre de 2016 17:24
  • mira esto es lo que estoy haciendo en mi funcion de Login 

    var login = function (usuario) {
     
                return $http.post('/Token',
                                  "userName=" + encodeURIComponent(usuario.userName) +
                                  "&password=" + encodeURIComponent(usuario.password) +
                                  "&grant_type=password");
     
            };

    Esto seria lo que tendria que hacer nuevamente, es decir, me tendria que logear una vez mas??? la pregunta es para que? si ya tengo el token, como se manda el token en el header de esta forma?

    var ConsultarClientes = function () {
               return $http.get('api/ClientesWebApi/ConsultarClientes',
                   {
                       headers: { 'Authorization''Bearer ' + CurrentUser.getProfile().token }
                   });
           };

    pero aqui no tengo un 'api/Cliente.... etc' entonces sobre que y a que deberia apuntarle con el Header, una vez mas agradezco la ayuda

    lunes, 24 de octubre de 2016 17:28
  • hola

    >>Esto seria lo que tendria que hacer nuevamente, es decir, me tendria que logear una vez mas?

    no necesitas loguearte nuevamente ya que el token sigue activo, salvo que quede invalido no hace falta volver autenticarte

    >>si ya tengo el token, como se manda el token en el header de esta forma?

    puede asegurar que cuando refrescas no se pierde el valor de CurrentUser.getProfile().token ?

    estas seguro que ClienteWebApi se llama el web api ? porque me suen algo extraño el nombre si es que usas asp.net mvc

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 24 de octubre de 2016 17:40
  • Hola Leandro excelente ya se que no necesito logearme una vez mas por que el token sigue activo, ya se me hacia raro que tuviera que logearme una vez mas.

    puede asegurar que cuando refrescas no se pierde el valor de CurrentUser.getProfile().token ? ..

    Efectivamente cuando refresco pierdo el valor pero ya lo estoy almacenando con $window.sessionStorage, y va muy biene recupero el valor tal y cual es

    estas seguro que ClienteWebApi se llama el web api ? porque me suen algo extraño el nombre si es que usas asp.net mvc ....

    NO y creo que ahi es donde esta mi problema, no se que web api debo llamar para que me tome nuevamente el Token y me diga que estoy autorizado, y no me envie al Login., por eso es que te pregunto, como debo hacer mi llamada, incluyendo el header, a que web api

    lunes, 24 de octubre de 2016 17:54
  • hola

    >>no se que web api debo llamar para que me tome nuevamente el Token

    llamas directo al api de cliente mientras tengas el token activo

    cuando la llamada al web api de cliente devuelva un error 404 de unauthorized alli debes volver a llamar al /token para pedirlo nuevamente

    >>ya lo estoy almacenando con $window.sessionStorage, y va muy biene recupero el valor tal y cual es

    excelente

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 24 de octubre de 2016 19:06
  • hola Leandro quiza no he hecho explicar bien. una vez mas todo

    partamos del hecho que yo ya me logeo ya obtengo mi token, mientras no actualice mi pagina funciona muy bien

    cuando refresco mi pagina, pierdo la informacion. entonces uso ngStorage para poder guardar mi informacion del token.

    apenas refresco la informacion va al metodo run de mi angular.module('app').run

    angularApp.run(['$location''$window''$http''UserAccount',
        function ($location, $window, $http, UserAccount) {
            // keep user logged in after page refresh
            var global = $window.sessionStorage.getItem('global');
     
            var globalInfo = JSON.parse(global);
     
            if (globalInfo) {
                UserAccount.login(globalInfo.CurrentUser);
            }
        }]); 


    aqui en este punto yo tengo mi token, tengo todo, usuario, contraseña todo guardado en $window.getItem etc...

    ahora, si yo me vuelvo a logear, con esto UserAccount.login(globalInfo.CurrentUser);

    var login = function (usuario) {
     
                return $http.post('/Token',
                                  "userName=" + encodeURIComponent(usuario.userName) +
                                  "&password=" + encodeURIComponent(usuario.password) +
                                  "&grant_type=password");
     
            };

    que es lo que no quiero hacer, no me quiero autenticar nuevamente. por que ya tengo un token, aqui es donde yo quiero saber que debo llamar, para enviarle mi token, como tu decias en el encabezado, pero no doy con el verdadero chiste, yo no me quiero logear es decir ya tengo mi token, no entiendo para que hacer otra peticion al servidor.

    espero que esta vez si me haya exlicado bien.

    mil gracias por tu apoyo

    lunes, 24 de octubre de 2016 19:57