$http Auth 헤더(각선)JS
노드 API에 도달하는 각도 어플리케이션을 가지고 있습니다.백엔드 개발자가 API에 기본 인증을 구현하여 요청 시 인증 헤더를 보내야 합니다.
추적했습니다.
$http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password);
시도했습니다.
.config(['$http', function($http) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password);
}])
또한 요청에 직접 추가할 수도 있습니다.
$http({method: 'GET', url: url, headers: {'Authorization': 'Basic auth'}})})
하지만 아무 것도 안 된다.어떻게 해결할까요?
사용 사례와 인스턴스화된 서비스를 혼재시키고 있습니다.$http
프로바이더는 실행 블록에서는 동작하지 않지만 설정 단계에서는 를 사용할 수 없습니다.모듈 문서:
- 구성 블록 - [...] 공급자 및 상수만 구성 블록에 삽입할 수 있습니다.이는 서비스가 완전히 설정되기 전에 실수로 인스턴스화되는 것을 방지하기 위한 것입니다.
- 실행 블록 - [...] 실행 블록에는 인스턴스와 상수만 주입할 수 있습니다.이는 애플리케이션 실행 시 추가 시스템 구성을 방지하기 위한 것입니다.
따라서 다음 중 하나를 사용합니다.
app.run(['$http', function($http) {
$http.defaults.headers.common['Authorization'] = /* ... */;
}]);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common['Authorization'] = /* ... */;
}])
다음과 같은 각도 요청 대행 수신기를 갖춘 서비스 팩토리가 있습니다.
var module = angular.module('MyAuthServices', ['ngResource']);
module
.factory('MyAuth', function () {
return {
accessTokenId: null
};
})
.config(function ($httpProvider) {
$httpProvider.interceptors.push('MyAuthRequestInterceptor');
})
.factory('MyAuthRequestInterceptor', [ '$q', '$location', 'MyAuth',
function ($q, $location, MyAuth) {
return {
'request': function (config) {
if (sessionStorage.getItem('accessToken')) {
console.log("token["+window.localStorage.getItem('accessToken')+"], config.headers: ", config.headers);
config.headers.authorization = sessionStorage.getItem('accessToken');
}
return config || $q.when(config);
}
,
responseError: function(rejection) {
console.log("Found responseError: ", rejection);
if (rejection.status == 401) {
console.log("Access denied (error 401), please login again");
//$location.nextAfterLogin = $location.path();
$location.path('/init/login');
}
return $q.reject(rejection);
}
}
}]);
로그인 컨트롤러에 로그인하면 다음 행을 사용하여 accessstoken을 저장합니다.
sessionStorage.setItem('currentUserId', $scope.loginResult.user.id);
sessionStorage.setItem('accessToken', $scope.loginResult.id);
sessionStorage.setItem('user', JSON.stringify($scope.loginResult.user));
sessionStorage.setItem('userRoles', JSON.stringify($scope.loginResult.roles));
이렇게 하면 로그인 후 모든 요청에 헤더를 할당할 수 있습니다.이것은 제가 하는 방식이고, 완전히 비판의 대상이 되고 있지만, 매우 효과가 있는 것 같습니다.
컨트롤러에서 사용할 수 있습니다.
.controller('Controller Name', ['$http', function($http) {
$http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password;
}]);
angularjs 매뉴얼에서는 헤더를 설정하는 방법을 몇 가지 볼 수 있지만, 다음과 같이 검색할 수 있습니다.
$http({
method: 'POST',
url: '/theUrl',
headers: {
'Authorization': 'Bearer ' + 'token'
//or
//'Authorization': 'Basic ' + 'token'
},
data: someData
}).then(function successCallback(response) {
$log.log("OK")
}, function errorCallback(response) {
if(response.status = 401){ // If you have set 401
$log.log("ohohoh")
}
});
ASP를 사용하는 angularjs 클라이언트에서 이 구조를 사용하고 있습니다.NET 5 서버라면 동작합니다.
$http 문서에서 $httpProvider를 사용하여 기본 헤더를 설정해야 합니다.
.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.common['Authorization'] = 'Basic auth';
}]);
작업 예: 이것은 @MrZime - Thanks!에서 학습한 것으로, https://docs.angularjs.org/api/ng/service/$http#setting-http-headers 를 참조해 주세요.
2018년 3월 2일 현재 NGULARJS의 최신 버전 1.6.x
var req = {
method: 'POST',
url: 'https://api.losant.com/applications/43fdsf5dfa5fcfe832ree/data/last-value-query',
headers: {
'Authorization': 'Bearer ' + 'adsadsdsdYXBpVG9rZW4iLCJzrdfiaWF0IjoxNdfsereOiJZ2V0c3RfdLmlvInfdfeweweFQI-dfdffwewdf34ee0',
'Accept': 'application/json',
'Content-Type': 'application/json'
},
data: {
"deviceIds": [
"a6fdgdfd5dfqaadsdd5",
"azcxd7d0ghghghghd832"
],
"attribute": "humidity"
}
}
$http(req).then(function successCallback(response) {
$log.log("OK!")
returnedData = response.data
}, function errorCallback(response) {
if (response.status = 401) { // If you have set 401
$log.log("BAD 401")
}
else {
$log.log("broken at last")
}
});
이를 your.js 파일에 추가하여 your.js를 your.html 파일에 포함시키고 chrome의 debug/F12 콘솔 패널을 보면 "OK" 상태를 얻을 수 있으며 "returned Data"는 최종적으로 원하는 것입니다.데이터를 즐겨보세요!
다음과 같이 "Basic"에 추가하기 전에 사용자: 비밀번호를 base64로 인코딩해당 사용자: 비밀번호를 다음과 같이 입력합니다.
headers: {
'Authorization': "Basic " + auth64EncodedUserColonPass
}
아래 줄을 추가합니다.aap.run
방법
$http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';
언급URL : https://stackoverflow.com/questions/18877715/http-auth-headers-in-angularjs
'programing' 카테고리의 다른 글
href가 아닌 data-target 탭이 있는 경우 부트스트랩 탭이 작동하지 않음 (0) | 2023.03.12 |
---|---|
문자열을 JSON 개체로 변환 (0) | 2023.03.12 |
angular view에서 full momentjs api를 얻는 방법? (0) | 2023.03.12 |
커스텀 업로드 폼을 사용하여 워드프레스에 파일을 업로드하려면 어떻게 해야 하나요? (0) | 2023.03.12 |
실행된 쿼리 수 카운트 (0) | 2023.03.12 |