각도 응용 프로그램에서 인증 구현
- Joseph Gordon-Levitt원래의
- 2025-02-21 08:40:14306검색
-
인증 및 승인은 거의 모든 심각한 응용 프로그램의 중요한 부분입니다. 단일 페이지 응용 프로그램 (SPA)도 예외는 아닙니다. 응용 프로그램은 모든 데이터와 기능을 사용자에게 노출시킬 수 없습니다. 사용자는 응용 프로그램의 특정 부분을 보거나 응용 프로그램에서 특정 작업을 수행하려면 인증해야 할 수도 있습니다. 응용 프로그램에서 사용자를 식별하려면 로그인해야합니다.
기존 서버 중심의 응용 프로그램 및 단일 페이지 응용 프로그램에서 사용자 관리 구현은 다릅니다. SPA가 서버 구성 요소와 상호 작용하는 유일한 방법은 Ajax를 통하는 것입니다. 로그인 및 로그 아웃도 마찬가지입니다. -
사용자를 식별하는 서버는 인증 엔드 포인트를 노출해야합니다. 스파는 검증을 위해 사용자 입력 자격 증명을이 엔드 포인트로 보냅니다. 일반적인 토큰 기반 인증 시스템에서 서비스는 자격 증명을 확인한 후 액세스 토큰 또는 로그인 사용자의 이름 및 역할을 포함하는 객체를 반환 할 수 있습니다. 클라이언트는 서버에 대한 모든 보안 API 요청 에서이 액세스 토큰을 사용해야합니다. - 로그인을 달성하십시오
<code class="language-javascript">app.factory("authenticationSvc", function($http, $q, $window) {
var userInfo;
function login(userName, password) {
var deferred = $q.defer();
$http.post("/api/login", {
userName: userName,
password: password
}).then(function(result) {
userInfo = {
accessToken: result.data.access_token,
userName: result.data.userName
};
$window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
deferred.resolve(userInfo);
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
return {
login: login
};
});</code>
실제 코드에서는 데이터를 SessionStorage에 별도의 서비스에 저장하는 진술을 리팩터링 할 수 있습니다.이 작업을 수행하면이 서비스가 여러 책임을 맡게되므로. 데모를 간단하게 유지하기 위해 동일한 서비스에 보관합니다. 이 서비스는 응용 프로그램 로그인 기능을 처리하는 컨트롤러에서 사용할 수 있습니다. 경로 보호
<code class="language-javascript">$routeProvider.when("/", {
templateUrl: "templates/home.html",
controller: "HomeController",
resolve: {
auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
var userInfo = authenticationSvc.getUserInfo();
if (userInfo) {
return $q.when(userInfo);
} else {
return $q.reject({ authenticated: false });
}
}]
}
});</code>
프로세싱 페이지 새로 고침
취소
<code class="language-javascript">app.factory("authenticationSvc", function() {
var userInfo;
function getUserInfo() {
return userInfo;
}
});</code>
결론
<code class="language-javascript">app.run(["$rootScope", "$location", function($rootScope, $location) {
$rootScope.$on("$routeChangeSuccess", function(userInfo) {
console.log(userInfo);
});
$rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) {
if (eventObj.authenticated === false) {
$location.path("/login");
}
});
}]);</code>
httpinterceptor는 서버로 전송하기 전에 HTTP 요청을 전 세계적으로 가로 채고 수정할 수있는 각도의 기능입니다. 모든 요청에 인증 토큰을 추가하거나 글로벌 오류를 처리하는 등 다양한 작업에 매우 유용합니다. this.http.get(url, { withCredentials: true }).subscribe(...);
범죄 적으로 처리 할 맞춤형 httpinterceptor를 만드는 방법은 무엇입니까?
이 인터셉터는 각 요청을 클론하고 withCredentials 속성을 true로 설정합니다.
CORS (Cross-Original Resource Sharing)는 리소스가 도메인에서 공유되는 방식을 제한하는 보안 기능입니다. CORS 오류를 받으면 서버는 도메인에서 요청을 수락하도록 구성되지 않습니다. 이를 해결하려면 "Access-Control-Ollow-Origin"헤더에 도메인을 포함하도록 서버를 구성하고 "Access-Control-Ollow-Credentials"를 True로 설정해야합니다.
나머지 FAQ는 httpclientModule의 사용과 관련이 있으며 기사의 핵심 주제 (Angular의 인증 구현)와 거의 관련이 없으므로 여기서 생략됩니다. 이러한 질문은 검색 엔진을 통해 쉽게 찾을 수 있습니다.
위 내용은 각도 응용 프로그램에서 인증 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!