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

Posted 2023-03-10

【中文标题】使用 JWT 处理 401（未授权）angularjs 身份验证

【英文标题】：Handling 401 (Unauthorized) angularjs Authentication using JWT

【发布时间】：2019-06-09 00:32:19

【问题描述】：

我有一个使用 web api 和 jwt 的 angularJS web 应用程序。我在这里按照互联网上的教程进行操作 > 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) 

【问题讨论】：

嘿@Geofrey。不幸的是，问题中的代码 sn-p 并没有说明如何或谁为新用户创建了新的 JWT 令牌。能否请您也添加该代码？

【参考方案1】：

由于 JWT 验证适用于本教程的 API，故障在于您的身份验证服务器，即 JWT 令牌的创建/验证）而不是上面的 sn-p（客户端处理）

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

---

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

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

【讨论】：

您好，非常感谢您的回答。身份验证服务器 API 是由我的一位团队成员使用 python django 构建的。他不使用 angularjs 进行编码。当我尝试使用邮递员调用 API 时，它工作正常，但是当我尝试在客户端的应用程序上实现它时，我得到 401 ..但仅在注册时。我想知道也许我必须在客户端传递 API 令牌才能注册，但我不知道这样做。