使用AngularJS向服务器发送访问令牌

时间:2016-10-11 22:32:40

标签: angularjs django authentication token

我尝试将Django REST Framework的基于令牌的身份验证方案与AngularJS客户端一起使用。我能够从服务器成功检索并存储令牌,但是我无法确定如何将令牌附加到后续响应中。这是管理登录和保存令牌的服务:

angular.module('mymodule')
.factory('loginService', function ($http, $window) {

    var api_base = "link to my api";

    return {
        async: function() {
            return $http.get(api_base + "authentication/login/").then(function (response) {
                return response.data;
            }, function errorCallback(response) {
                console.log("Testuser API Error: " + response);
                return null;
            });
        },

        loginUser: function(email, password) {
            self.saveToken = function(auth_token) {
                $window.localStorage['jwtToken'] = auth_token;
            };
            self.getToken = function() {
                return $window.localStorage['jwtToken'];
            };

            console.log("...to listing " + email);

            return $http.post("link to my api/authentication/login/", {
                email: email,
                password: password


            }).then(function(response) {
                if(response.config.url.indexOf("link to my api") === 0 && response.data.auth_token) {
                    self.saveToken(response.data.auth_token);
                }

                return response;


            });

        }



    };

});

这里是与上述服务相关联的控制器,用于处理登录:

angular.module('mymodule').controller("LoginController", function(loginService, $scope) {
$scope.loginusers = [];

$scope.refresh = function() {
    loginService.async().then(function(data) {
        if (data == null)
            return;

        console.log(data[0]["email"]);

        $scope.loginusers = [];
        for (var loginuser in data)
            $scope.loginusers.push(loginuser);
    });
};
$scope.refresh();


// Test //
$scope.loginTestUser = function() {
    console.log("something...");

    loginService.loginUser(
        $scope.email,
        $scope.password


    )
};

//////



});

这是我将用于在将令牌发送回服务器后显示用户个人资料时使用的服务。

angular.module('mymodule').factory("profileService", function($http, loginService, $httpProvider) {

var api_base = "link to my api";


$httpProvider.interceptors.push(function($q, $window) {
    return {
        'request': function(config) {

            config.headers['Token'] = $window.localStorage['jwtToken'];
            return config;
        }
    };
});

return {


    async: function() {
        return $http.get(api_base + "authentication/me/").then(function (response) {
            return response.data[0];
        }, function errorCallback(response) {
            console.log("Profile API Error: " + response);
            return null;

        });

    }

};



});

我该如何接近这个?

0 个答案:

没有答案