ASPNETcoreAngularJWT

ASPNETcoreAngularJWT

นี่คือกรณีการแสดงพื้นฐานสำหรับการอนุญาตโทเค็นผู้ถือ jwt โดยใช้เชิงมุมเป็นส่วนหน้าและ ASP.NET Core เป็นแบ็กเอนด์ ASP.NET Core3.1 เชิงมุม7.2.1 พร้อม systemjs (ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง dotnet core 3.1 + และ Angular7.2.1 แล้ว)

---

(ทำไม systemjs ไม่ใช่ webpack ความเห็นส่วนตัว: webpack ซับซ้อนเกินกว่าจะใช้กับแอปพลิเคชันขนาดเล็กและเรียบง่าย ฉันค่อนข้างกลัวว่าจะมีประสิทธิภาพเพื่อให้โปรแกรมเมอร์ส่วนใหญ่สามารถอ่านโค้ดตัวอย่างของฉันได้)

---

ตอนนี้คุณสามารถหยุด Google และค้นหาวิธีดำเนินการรับรองความถูกต้องโทเค็น JWT ได้แล้ว มันง่ายมาก!

ที่แบ็กเอนด์: MS$ จัดเตรียมมิดเดิลแวร์ AddAuthentication().AddJwtBearer() สำหรับหมี JWT token Authentication ดังนั้นสิ่งต่าง ๆ จึงกลายเป็นเรื่องง่ายเพียงแค่เพิ่มมิดเดิลแวร์ที่ Startup.cs

ที่ส่วนหน้า (เชิงมุมในกรณีนี้): บันทึกโทเค็นใน sessionStorage และเมื่อพูดคุยกับแบ็กเอนด์ ให้ตั้งค่าส่วนหัวของคำขอ http (https สำหรับการผลิต) เป็น:

 let headers = new HttpHeaders()
                    .set('Content-Type','application/json')
                    .set("Authorization", "Bearer " + token);

---

Angular & Material 7.2.1 ใน ASP.NET Core 3.1 (เวอร์ชัน VS2019 หรือ csproj) พร้อมโซลูชัน JWT

ตรวจสอบให้แน่ใจว่า:

ติดตั้ง 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

และอย่าลืมเรียกใช้ "npm start" หลังจากแก้ไขไฟล์ typescript ใด ๆ

คุณสามารถเรียกใช้สิ่งนี้สำหรับการคอมไพล์เชิงมุมและการรันดอทเน็ต

 >npm run runall

นอกจากนี้ยังสามารถเปิดได้ทั้ง Visual Studio 2017 หรือ Visual Studio Code หลังจากเปิดโดย VS2017 และก่อนที่จะเรียกใช้ในฐานะดีบัก ตรวจสอบให้แน่ใจว่าโปรเจ็กต์ -> คุณสมบัติ -> ดีบักและ URL ของแอป ="http://localhost:5000" และสร้างใหม่อีกครั้งก่อนที่จะเริ่มดีบัก