Заголовок проверки подлинности на основе токена AngularJS

Question

Я немного новичок в угловом и у меня есть приложение, которое я начал. Начало этого - просто простой логин, который попадет в REST API и аутентифицирует пользователя и отправит обратно токен JSON, проверяющий пользователя. Каждый последующий запрос отправляет заголовок аутентификации, содержащий токен, чтобы убедиться, что они вошли в систему, конечно.

Вот мой код до сих пор -

AngularJS:

;(function(){ 

function authInterceptor(API, auth) { 
    return { 
    request: function(config) { 
     return config; 
    } 
    } 
} 


function authService() { 

} 


function userService($http, API, auth) { 

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;'; 
    $http.defaults.transformRequest = [function(data) { 
     return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; 
     }]; 

    var self = this; 

    self.login = function(username, pwd, ctrl) { 
     ctrl.requestdata = API + '/winauth' + '; with ' + username; 
    return $http.post(API + '/winauth', { 
     username: username, 
     pwd: pwd 
     }) 
    }; 

    var param = function(obj) { 
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i; 

    for(name in obj) { 
     value = obj[name]; 

     if(value instanceof Array) { 
     for(i=0; i<value.length; ++i) { 
      subValue = value[i]; 
      fullSubName = name + '[' + i + ']'; 
      innerObj = {}; 
      innerObj[fullSubName] = subValue; 
      query += param(innerObj) + '&'; 
     } 
     } 
     else if(value instanceof Object) { 
     for(subName in value) { 
      subValue = value[subName]; 
      fullSubName = name + '[' + subName + ']'; 
      innerObj = {}; 
      innerObj[fullSubName] = subValue; 
      query += param(innerObj) + '&'; 
     } 
     } 
     else if(value !== undefined && value !== null) 
     query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; 
    } 

    return query.length ? query.substr(0, query.length - 1) : query; 
    }; 

} 


    function MainCtrl(user, auth) { 
    var self = this; 

    function handleRequest(res) { 
     self.responsedata = res; 
     self.message = res.data.message; 
    } 

    self.login = function() { 
     this.requestdata = 'Starting request...'; 
     user.login(self.username, self.pwd, self) 
     .then(handleRequest, handleRequest) 
    } 
    } 

    angular.module('app', []) 
    .factory('authInterceptor', authInterceptor) 
    .service('user', userService) 
    .service('auth', authService) 
    .constant('API', 'http://development-server.com:8080/ecar/api') 
    .config(function($httpProvider) { 
    $httpProvider.interceptors.push('authInterceptor'); 
    }) 
    .controller('Main', MainCtrl) 
    })(); 

Позвольте мне сейчас сказать, что это НЕ JWT и что это IS работает. Он попадает на сервер и после успешной проверки подлинности (слова из моего босса) ** ответ, отправленный назад, представляет собой массив JSON, содержащий имя поля «auth_token», в котором содержится токен, который будет отправлен с последующими запросами. Этот токен должен быть отправлен с любыми последующими запросами в виде заголовка пользовательского запроса с именем X-PCC-API-TOKEN. **

Вот ответ сервер возвращает:

http://appsdev.pccportal.com:8080/ecar/api/winauth; with myUsername 
     {"data":{"status":"Authentication has succeeded.","auth_token":"qidn0pwcuvl4jbml73qls94hk4"},"status":200,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"url":"http://development-server.com:8080/ecar/api/winauth","data":{"username":"myUsername","pwd":"myPassword"},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/x-www-form-urlencoded;"}},"statusText":"OK"} 

Как вы можете видеть, что это преуспевает и возвращает массив JSON с именем поля «auth_token», который содержит маркер.

Что мне нужно сделать, мы надеемся сохранить этот токен в своем локальном хранилище и, как сказал мне мой босс (он тот, кто проектировал API) «токен должен быть отправлен с каждым последующим запросом и маркер должен быть отправлен в качестве пользовательского запроса заголовка с именем X-PCC-API-ЗНАК»

Это было в учебнике, что я проходил через:

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

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

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

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

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

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

и Это для перехватчика:

function authInterceptor(API, auth) { 
    return { 

    request: function(config) { 
     var token = auth.getToken(); 
     if(token && config.url.indexOf(API) === 0) { 
     config.headers.Authorization = 'Bearer ' + token; 
     } 

     return config; 
    } 
    } 

} 

Но это, очевидно, для JWT. Мне нужно, чтобы он соответствовал моим советам боссов, а также не использовал JWT.

Извините за весь код. Надеюсь, это не плохо. Но для завершения этого аутентификационного штрафа и отправки массива JSON, содержащего токен, который мне нужно отправить обратно в качестве настраиваемого заголовка с именем X-PCC-API-TOKEN с каждым последующим запросом и, надеюсь, сохранить токен в своем локальном хранилище.

Мне очень нужна помощь в этом. И не знаю, как это сделать.

С благодарностью

Answer 1

В принципе, у вас есть способ входа в систему, несколько работающий. Вы попадаете на сервер API, и вы получаете ответ с помощью токена. Все идет нормально. Вам просто нужно сохранить токен в localStorage и добавить его в каждый заголовок API-заголовка X-PCC-API-TOKEN.

Вы можете создать еще один сервис, который обрабатывает хранения, но если вы не хотите/нужно что-то сложности, то вы можете просто добавить

var authToken = res.data.auth_token; 
localStorage.setItem('token', authToken); 

где бы вы ни обрабатывать полученные данные от входа - в вашем случай это ваш handleRequest функция.

После этого вам просто нужно добавить свой перехватчик. Ваш пример с JWT действительно близок к тому, что вам нужно на самом деле. (JWT просто установив Authorization заголовок вместо этого, что вам нужно.)

function authInterceptor() { 
    return { 
     request: function (request) { 
      request.headers = request.headers || {}; 
      request.headers['X-PCC-API-TOKEN'] = localStorage.getItem('token'); 
      return request; 
     } 
    }; 
} 

Очевидно, что если вы использовали службу для обработки хранения, вы можете получить маркер через это. Кроме того, вы должны добавлять пользовательский заголовок к вашим вызовам API, поэтому просто введите его в простой if, где вы проверяете, является ли он одним или нет.