Обработка 401 (неавторизованной) angularjs аутентификации с использованием JWT

Question

У меня есть веб-приложение angularJS, которое использует веб-API и JWT. Я следовал учебному пособию в Интернете здесь> angularjs-jwt-auth все работает нормально, когда я вхожу, используя учетные данные из моего собственного API, возвращает токен на консоли, как и должно.

Но проблема возникает, когда я пытаюсь зарегистрировать нового пользователя, ничего не происходит, и консоль выдает мне сообщение об ошибке Не удалось загрузить ресурс: сервер ответил с состоянием 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) {

Answer 1

Поскольку проверка JWT работает для API учебника, ошибка заключается в вашем сервере аутентификации , т.е. создании / проверке токена JWT), а не в приведенном выше фрагменте (обработка клиента)

Вы получаете 401 из-за неправильного созданного токена JWT или неправильной проверки токена JWT

---

Краткое объяснение того, как JWT аутентифицируется.

• В этом примере пользователь сначала входит на сервер аутентификации, используя систему входа на сервер аутентификации.
• Затем сервер аутентификации создает JWT и отправляет его пользователю.
• Когда пользователь выполняет вызовы API для приложения, он передает JWT вместе с вызовом API.
• В этой настройке сервер приложений будет настроен для проверки того, что входящий JWT создан сервером аутентификации