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

Question

我有一个 angularJS 网络应用程序，它使用网络 api 和 jwt。我在此处按照互联网上的教程进行操作 > angularjs-jwt-auth 当我在控制台上使用我自己的 api,returns 令牌的凭据登录时，一切正常。

但是当我尝试注册新用户时出现了问题，没有任何反应，控制台向我抛出错误无法加载资源：服务器响应状态为 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 令牌的 creation/verification）而不是在上面的片段（客户端处理）

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

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

在示例中，用户首先使用认证服务器的登录系统登录到认证服务器。
然后身份验证服务器创建 JWT 并将其发送给用户。
当用户对应用程序进行 API 调用时，用户将 JWT 与 API 调用一起传递。
在此设置中，应用程序服务器将配置为验证传入的 JWT 是否由身份验证服务器创建

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

Handling 401 (Unauthorized) angularjs Authentication using JWT

authentication

api

login

jwt

angularjs

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