ASPNETcoreAngularJWT

ASPNETcoreAngularJWT

Berikut adalah contoh kasus yang sangat mendasar untuk otorisasi token pembawa jwt, menggunakan sudut sebagai ujung depan dan ASP.NET Core sebagai ujung belakang. ASP.NET Core3.1 Angular7.2.1 dengan systemjs. (Pastikan Anda telah menginstal dotnet core 3.1+ dan Angular7.2.1)

---

(Mengapa systemjs bukan webpack? Pendapat pribadi: webpack terlalu rumit untuk digunakan untuk ukuran kecil, aplikasi sederhana, saya agak melakukan skarifikasi efisien agar sebagian besar pemrogram dapat membaca kode contoh saya)

---

Sekarang Anda dapat menghentikan Google dan mencari tahu cara melakukan Otentikasi token JWT, sederhana!

Di backend: MS$ menyediakan middleware AddAuthentication().AddJwtBearer() untuk Otentikasi token JWT beruang, jadi, semuanya menjadi sesederhana menambahkan middleware di Startup.cs

Di frontend (dalam hal ini sudut): simpan token di sessionStorage, dan ketika berbicara dengan backend, atur header permintaan http(https untuk produksi) sebagai:

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

---

Angular & material 7.2.1 di ASP.NET Core 3.1 (versi VS2019 atau csproj) dengan solusi JWT.

Memastikan:

ASP.NET CORE 3.1 telah diinstal, jika belum, dapatkan dari sini: https://www.microsoft.com/net/download/core

nodejs telah diinstal, jika belum, dapatkan dari https://nodejs.org/en/download/

setelah mengunduh repositori ini, buka folder dengan file ASPNETCoreAngularJWT.csproj dan jalankan perintah:

 >dotnet restore

>npm install

>npm start

Akhirnya mulai dotnet dan browser http://localhost:5000 oleh

 >dotnet run

Dan jangan lupa untuk menjalankan "npm start" setelah memodifikasi file TypeScript apa pun.

Anda dapat menjalankan ini untuk kompilasi sudut dan menjalankan dotnet

 >npm run runall

Juga dapat dibuka oleh Visual Studio 2017 atau Visual Studio Code. Setelah dibuka oleh VS2017 dan sebelum dijalankan sebagai debug, pastikan project-> property -> Debug dan App URL ="http://localhost:5000" dan bangun kembali sebelum mulai men-debug