Cómo almacenar el token del portador de autenticación en la cookie del navegador usando AngularJS

Hola, hallamos la solución a tu búsqueda, deslízate y la hallarás aquí.

Solución:

Hay un $cookies servicio disponible en la API de AngularJS usando el
ngCookies módulo. Se puede utilizar como a continuación:

function controller($cookies) 
    //set cookie
    $cookies.put('token', 'myBearerToken');

    //get cookie
    var token=$cookies.get('token');

    //remove token
    $cookies.remove('token');

controller.$inject=['$cookies'];

Para tu caso sería:

//inject $cookies into controller
$scope.GetAuthorizeData = function () 
    $http(
        method: 'GET',
        url: "/api/Values",
        headers:  'authorization': 'bearer ' ,
    )
    .success(function (data) 
        $cookies.put('token', data);
    ).error(function () 
        alert("Failed :(");
    );
;

También deberá agregar el código del módulo de cookies angulares. Y agréguelo a su aplicación angular: angular.module('myApp', ['ngCookies']);. Documentos para cookies angulares.

También me gustaría sugerir el uso de un Http interceptor que configurará el encabezado del portador para cada solicitud, en lugar de tener que configurarlo manualmente para cada solicitud.

//Create a http interceptor factory
function accessTokenHttpInterceptor($cookies) 
    return 
        //For each request the interceptor will set the bearer token header.
        request: function($config) 
            //Fetch token from cookie
            var token=$cookies.get['token'];

            //set authorization header
            $config.headers['Authorization'] = 'Bearer '+token;
            return $config;
        ,
        response: function(response) 
            //if you get a token back in your response you can use 
            //the response interceptor to update the token in the 
            //stored in the cookie
            if (response.config.headers.yourTokenProperty) 
                  //fetch token
                  var token=response.config.headers.yourTokenProperty;

                  //set token
                  $cookies.put('token', token);
            
            return response;
        
    ;

accessTokenHttpInterceptor.$inject=['$cookies'];

//Register the http interceptor to angular config.
function httpInterceptorRegistry($httpProvider) 
    $httpProvider.interceptors.push('accessTokenHttpInterceptor');

httpInterceptorRegistry.$inject=['$httpProvider'];

//Assign to module
angular
    .module('myApp')
    .config(httpInterceptorRegistry)
    .factory('accessTokenHttpInterceptor', accessTokenHttpInterceptor)

Tener el http interceptor en su lugar no es necesario configurar el Authorization header para cada solicitud.

function service($http) 
    this.fetchToken=function() 
        //Authorization header will be set before sending request.
        return $http
            .get("/api/some/endpoint")
            .success(function(data) 
                 console.log(data);
                 return data;
            )
    

service.$inject=['$http']

Como dijo Boris: hay otras formas de resolver esto. También podrías usar localStorage para almacenar la ficha. Esto también se puede usar con el interceptor http. Simplemente cambie la implementación de cookies a localStorage.

function controller($window) 
    //set token
    $window.localStorage['jwt']="myToken";

    //get token
    var token=$window.localStorage['jwt'];

controller.$inject=['$window'];

Aconsejaría no mantener los datos en una cookie, por motivos de seguridad, debe configurar las cookies para que sean seguras y HttpOnly (no accesible desde javascript). Si no está usando SSL, le sugiero que cambie a https.

Pasaría el token desde el punto final de autenticación en una respuesta json:

    tokenData: 'token'

Puede guardar los datos del token en sessionStorage usando el $window Servicio:

$window.sessionStorage.setItem('userInfo-token', 'tokenData');

Se borrará una vez que el usuario cierre la página, y puede eliminarlo manualmente configurándolo en vacío string:

$window.sessionStorage.setItem('userInfo-token', '');

Editar:

Implementación de interceptor para capturar datos, adaptado de cbass (no probado, puede inspeccionar los objetos en busca de respuesta/solicitud para jugar con la información):

//Create a http interceptor factory
function accessTokenHttpInterceptor($window) 
    return 
        //For each request the interceptor will set the bearer token header.
        request: function($config) 
            //Fetch token from cookie
            var token=$window.sessionStorage.getItem('userInfo-token');

            //set authorization header
            $config.headers['Authorization'] = 'Bearer '+token;
            return $config;
        ,
        response: function(response) 
            //if you get a token back in your response you can use 
            //the response interceptor to update the token in the 
            //stored in the cookie
            if (response.config.url === 'api/token' && response.config.data.tokenData) 
                  //fetch token
                  var token=response.config.data.tokenData;

                  //set token
                  $window.sessionStorage.setItem('userInfo-token', token);
            
            return response;
        
    ;


accessTokenHttpInterceptor.$inject=['$window'];

Puntuaciones y reseñas

---

---

Utiliza Nuestro Buscador