使用JWT处理401（未经授权）angularjs身份验证

我有一个angularJS web应用程序，它使用web api和jwt。我在这里遵循了internet上的教程>当我从自己的api使用凭据登录时，一切都正常工作，在控制台上按应有的方式返回令牌

但当我尝试注册一个新用户时，问题出现了，但什么也没有发生，console向我抛出了一个错误加载资源失败：服务器响应状态为401（未授权）。当我使用教程中的api工作正常时，我有点不知所措，请帮助

我的代码

(function () {

function authInterceptor(API, auth) {
    return {
        // automatically attach Authorization header
        request: function (config) {
            config.headers = config.headers || {};
            var token = auth.getToken();
            if (config.url.indexOf(API) === 0 && token) {
                config.headers.Authorization = 'Bearer ' + token;
            }
            return config;
        },

        response: function (res) {
            if (res.config.url.indexOf(API) === 0 && res.data.token) {
                auth.saveToken(res.data.token);
            }

            return res;
        },
    }
}

// Services

function authService($window) {
    var srvc = this;

    srvc.parseJwt = function (token) {
        var base64Url = token.split('.')[1];
        var base64 = base64Url.replace('-', '+').replace('_', '/');
        return JSON.parse($window.atob(base64));
    };

    srvc.saveToken = function (token) {
        $window.localStorage['jwtToken'] = token
    };

    srvc.logout = function (token) {
        $window.localStorage.removeItem('jwtToken');
    };

    srvc.getToken = function () {
        return $window.localStorage['jwtToken'];
    };

    srvc.saveUsername = function (username) {
        $window.localStorage['username'] = username;
    }

    srvc.getUsername = function () {
        return $window.localStorage['username'];
    }

    srvc.isAuthed = function () {
        var token = srvc.getToken();
        if (token) {
            var params = srvc.parseJwt(token);
            return Math.round(new Date().getTime() / 1000) <= params.exp;

        } else {
            return false;
        }
    }

}



function userService($http, API, auth) {
    var srvc = this;

    srvc.register = function (first_name, last_name, email, password, role, gender, phone_number) {
        return $http.post(API + '/api/v1/users/', { // <-- Registration link here
            first_name: first_name,
            last_name: last_name,
            email: email,
            password: password,
            role: role,
            gender: gender,
            phone_number: phone_number
        });
    }

    srvc.login = function (username, password) {
        return $http.post(API + '/api/v1/token/auth/', { // <-- Login link here
            username: username,
            password: password
        });

    };




    return srvc;


}




// We won't touch anything in here
function MainCtrl(user, auth, $location, $state, $rootScope) {
    var self = this;

    function handleRequest(res) {
        var token = res.data ? res.data.token : null;
        if (token) {
            $location.path('/portfolio');
            console.log('Bearer:', token);


            auth.saveUsername($scope.username);
            $rootScope.username = auth.getUsername();
        }
        // self.message = res.data.message;
    }



    self.login = function () {
        user.login(self.username, self.password)
            .then(handleRequest, handleRequest)
    }


    self.register = function () {
        user.register(self.first_name, self.last_name, self.username, self.email, self.password, self.role, self.gender, self.phone_number)
            .then(handleRequest, handleRequest)
    }

    self.logout = function () {
        auth.logout && auth.logout();
        $location.path('/login');
    }
    self.isAuthed = function () {
        return auth.isAuthed ? auth.isAuthed() : false
    }
}




angular
    .module('App', ['ui.router'])
    .factory('authInterceptor', authInterceptor)
    .service('user', userService)
    .service('auth', authService)
    .constant('API', 'link-to-my-api') // <-- API Link here
    .config(function ($stateProvider, $urlRouterProvider, $httpProvider) {

（函数（）{
函数authInterceptor（API，auth）{
返回{
//自动附加授权标头
请求：函数（配置）{
config.headers=config.headers | |{}；
var token=auth.getToken（）；
if（config.url.indexOf（API）==0&&token）{
config.headers.Authorization='Bearer'+令牌；
}
返回配置；
},
答复：功能（res）{
if（res.config.url.indexOf（API）==0&&res.data.token）{
auth.saveToken（res.data.token）；
}
返回res；
},
}
}
//服务
函数authService（$window）{
var srvc=此；
srvc.parseJwt=函数（令牌）{
var base64Url=token.split（'.'）[1]；
var base64=base64Url.replace（'-'，'+'）.replace（'''''，'/'）；
返回JSON.parse（$window.atob（base64））；
};
srvc.saveToken=函数（令牌）{
$window.localStorage['jwtToken']=token
};
srvc.logout=函数（令牌）{
$window.localStorage.removietem（'jwtToken'）；
};
srvc.getToken=函数（）{
返回$window.localStorage['jwtToken']；
};
srvc.saveUsername=函数（用户名）{
$window.localStorage['username']=用户名；
}
srvc.getUsername=函数（）{
返回$window.localStorage['username']；
}
srvc.isAuthed=函数（）{
var token=srvc.getToken（）；
如果（令牌）{
var params=srvc.parseJwt（令牌）；
return Math.round（new Date（）.getTime（）/1000）由于JWT验证正在为教程的API工作，错误在于您的身份验证服务器（即JWT令牌的创建/验证），而不是上面的代码段（客户端处理）

由于创建的JWT令牌不正确或JWT令牌的验证不正确，您将获得401


简要说明JWT如何进行身份验证。


在本例中，用户首先使用身份验证服务器的登录系统登录到身份验证服务器
然后，身份验证服务器创建JWT并将其发送给用户
当用户对应用程序进行API调用时，用户将JWT与API调用一起传递
在此设置中，应用服务器将被配置为验证传入JWT是否由身份验证服务器创建
Hey@Geofrey。不幸的是，问题中的代码片段没有说明如何或谁为新用户创建了新的JWT令牌。请您也添加该代码好吗？您好，非常感谢您的回答。身份验证服务器API是由我的一名团队成员使用python django构建的。他没有使用angularjs进行编码。当我尝试这样做时o使用postman调用API工作正常，但当我尝试在客户端的应用程序上实现它时，我得到了401..但只有在注册时。我想知道也许我必须在客户端传递API令牌，以便我可以注册，但我不知道该怎么做。