如何使用angularJS在服务标头中的localstorage中传递值存储?

时间:2014-09-22 08:38:23

标签: angularjs

我有两个api用于登录,另一个用于注销,在succcessfulll登录时我得到了acesstoken,并且在acesstoken的基础上我必须通过在标题中传递acesstoken来注销。

因此,为了注销我所做的,我在localstorage中存储了acesstoken值并传入标题,但我收到错误“ AccessToken无效。

这是services.js:

angular.module('server', [])
.factory('api', function($http) {
    var token = localStorage.AccessToken;
    console.log(token);
    var server = "http://myapi-nethealth.azurewebsites.net";
        return {
            //Login
            login : function(formdata) {
                return $http({
                    method: 'POST',
                    url: server + '/Users/Login',
                    data: $.param(formdata),
                    headers: { 'Content-Type' : 'application/x-www-form-urlencoded'},
                });
            },
            logout : function() {
                return $http({
                    method: 'POST',
                    url: server + '/Users/Me/Logout',
                    headers: { 'Content-Type' : 'application/x-www-form-urlencoded', 'Authorization' : 'token ' + token},

                    /*headers: { 'Content-Type' : 'application/json', 'Authorization' : 'token '  + token},*/
                }).success(function (data, status, headers, config){
                    alert(JSON.stringify(status));
                });
            }
        };

    });

// Controller.js ..

ctrl.controller('logout', function($scope,  $window,  $state, api) {
    $scope.logout = function() {
        api.logout()
            .success(function(data) {
                console.log(data);
                $scope.response = data;
                $state.go('home');
                })
            .error(function(data) {
                console.log(data);
                $scope.response = data;
            });
    }
});
ctrl.controller('search', function($scope, $state) {
                $scope.search = function() {
            $state.go('clinic-list');
          };

    });
ctrl.controller('clinicCtrl', function($scope, $state, $window, api) {
    $scope.formData = {};
    $scope.clinicCtrl = function() {
    /*$scope.loading = true;*/
        api.login($scope.formData)
            .success(function(data, status) {
                console.log(data);
                $scope.response = data;
                if (data.hasOwnProperty('AccessToken') && data.AccessToken.length > 5) {
                    $state.go('home');
                    window.localStorage['AccessToken'] = angular.toJson(data.AccessToken);
                    var accessData = window.localStorage['AccessToken'];
                    console.log(accessData);
                    } else {

                        $state.go('login');
                    }
                /*$scope.loading = false;*/
            })
            .error(function(data) {
                console.log(data);
                $scope.response = data;
                $window.alert($scope.response.Message);
                console.log($scope.response.Message);
        });
    }

});

请告诉我该怎么做....

1 个答案:

答案 0 :(得分:0)

angular.module('server', []).factory('authInterceptor',function($q,$location) {
    return {
        request: function(config) {
            config.headers = config.headers || {};
            if(localStorage.AccessToken) {
                config.headers.AccessToken = localStorage.AccessToken;
            }
            config.headers.requestResourse = $location.$$url;
            return config;
        },
        responseError: function(response) {               
            return $q.reject(response);
        }
    }
}).config(function($httpProvider) {
        $httpProvider.interceptors.push('authInterceptor');
    })..factory('api', function($http) {
var token = localStorage.AccessToken;
console.log(token);
var server = "http://myapi-nethealth.azurewebsites.net";
    return {
        //Login
        login : function(formdata) {
            return $http({
                method: 'POST',
                url: server + '/Users/Login',
                data: $.param(formdata),
                headers: { 'Content-Type' : 'application/x-www-form-urlencoded'},
            });
        },...............

这会将令牌附加到所有请求,在你获得响应之后,在控制器中你可以重新设置令牌:) 根据您的变量进行自定义