다음은 각도를 프런트 엔드로 사용하고 ASP.NET Core를 백엔드로 사용하는 JWT 전달자 토큰 인증에 대한 매우 기본적인 쇼 케이스입니다. ASP.NET Core3.1 angle7.2.1(systemjs 포함) (dotnet core 3.1 + 및 Angular7.2.1이 설치되어 있는지 확인하십시오)
(왜 systemjs는 webpack이 아닌가? 개인적인 의견: webpack은 작은 크기의 간단한 응용 프로그램에 사용하기에는 너무 복잡합니다. 대부분의 프로그래머가 내 예제 코드를 읽을 수 있도록 하는 것이 효율적이지는 않습니다.)
이제 Google을 중지하고 JWT 토큰 인증을 수행하는 방법을 알아볼 수 있습니다. 간단합니다!
백엔드에서: MS$는 Bear JWT 토큰 인증을 위한 미들웨어 AddAuthentication().AddJwtBearer()를 제공하므로 Startup.cs에 미들웨어를 추가하는 것만큼 간단해집니다.
프론트엔드(이 경우 각도): sessionStorage에 토큰을 저장하고 백엔드와 통신할 때 http(프로덕션용 https) 요청의 헤더를 다음과 같이 설정합니다.
let headers = new HttpHeaders()
.set('Content-Type','application/json')
.set("Authorization", "Bearer " + token);
JWT 솔루션을 사용하는 ASP.NET Core 3.1(VS2019 또는 csproj 버전)의 Angular & Material 7.2.1.
확실하게 하다:
ASP.NET CORE 3.1이 설치되어 있지 않은 경우 여기에서 다운로드하십시오: https://www.microsoft.com/net/download/core
nodejs가 설치되어 있지 않으면 https://nodejs.org/en/download/에서 다운로드하세요.
이 리포지토리를 다운로드한 후 ASPNETCoreAngularJWT.csproj 파일이 있는 폴더로 이동하여 다음 명령을 실행합니다.
>dotnet restore
>npm install
>npm start
마지막으로 dotnet 및 브라우저 http://localhost:5000을 시작합니다.
>dotnet run
그리고 TypeScript 파일을 수정한 후에는 "npm start"를 실행하는 것을 잊지 마세요.
각도 컴파일 및 dotnet 실행을 위해 이것을 실행할 수 있습니다.
>npm run runall
또한 Visual Studio 2017 또는 Visual Studio Code 모두에서 열 수 있습니다. VS2017로 연 후 디버그로 실행하기 전에 프로젝트-> 속성-> 디버그 및 앱 URL = "http://localhost:5000"인지 확인하고 디버그를 시작하기 전에 다시 다시 빌드하십시오.