Pengesahan Angular 2: Melindungi kandungan peribadi

Artikel ini menunjukkan cara menambah pengesahan kepada aplikasi sudut, melindungi bahagian tertentu dari akses yang tidak dibenarkan. Ini Bahagian 5 dari Tutorial SitePoint Angular 2 untuk membina aplikasi CRUD dengan Cli Angular.

Tutorial ini dibina pada bahagian sebelumnya, tetapi anda boleh bermula dengan kod bahagian-4 yang disediakan di

https://www.php.cn/link/92e7f4b2ddd224859b3f38aa9378f949 . Kod yang berkaitan untuk bahagian ini ditandakan sebagai . part-5

Konsep Utama:

Bahagian ini menggunakan Token Web Angular 2 dan JSON (JWTS) untuk pengurusan sesi klien. Backend (menggunakan

dan json-server) mengendalikan permintaan pengesahan dan mengesahkan token. Perkhidmatan Angular Berdedikasikan (body-parser dan AuthService) menguruskan data logik dan sesi pengesahan. A SessionService mempunyai bentuk reaktif untuk pengesahan pengguna, dan pengawal laluan (SignInComponent) mencegah akses laluan yang tidak dibenarkan. CanActivate dikonfigurasikan untuk memasukkan JWTS dalam tajuk kebenaran untuk komunikasi API yang selamat. Akhirnya, ciri pendaftaran dalam ApiService membolehkan pengguna mengakhiri sesi. TodosComponent

Persediaan:

Pastikan anda mempunyai CLI sudut terkini:

<code class="language-bash">npm install -g @angular/cli@latest</code>

(gunakan

untuk mengeluarkan versi terdahulu). npm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latest

klon repositori, checkout bahagian-4, dan memasang dependensi:

<code class="language-bash">git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-4
npm install
ng serve</code>

mengakses aplikasi di

. http://localhost:4200

pelaksanaan:

Artikel ini meliputi menyediakan backend untuk pengesahan, menambah kaedah log masuk ke

, mewujudkan perkhidmatan pengesahan dan sesi, membina ApiService, melaksanakan pengawal laluan, dan menghantar token pengguna dalam permintaan API. SignInComponent

backend (

) mengendalikan permintaan log masuk dan melindungi laluan berdasarkan pengesahan token. json-server.js termasuk kaedah ApiService. Data Sesi signIn> menyimpan (token dan nama pengguna). SessionService menggunakan bentuk reaktif untuk input pengguna. Pengawal SignInComponent melindungi laluan, dan CanActivate menghantar token dalam tajuk permintaan. Butang masuk ditambah ke ApiService. TodosComponent

Strategi Pengesahan (JWTS):

Tutorial menggunakan JWTS untuk pengurusan sesi klien, berbeza dengan pengurusan sesi pelayan menggunakan kuki. JWTS disimpan di sisi pelanggan dan dihantar ke pelayan seperti yang diperlukan.

cabaran:

Cabaran melibatkan data sesi yang berterusan merentasi penyemak imbas menggunakan sessionStorage atau localStorage.

FAQ:

Artikel ini disimpulkan dengan bahagian FAQ yang meliputi pengesahan Angular 2, pengesahan bentuk, melaksanakan pengesahan pengguna, peranan CLI sudut, ralat pengendalian, ujian, dan menggunakan Loginradius CLI.

Output yang disemak ini mengekalkan imej asal dan formatnya sambil memupuk kandungan untuk mencapai pseudo-asal. Maklumat teras tetap sama, tetapi struktur perkataan dan ayat telah diubah.

Atas ialah kandungan terperinci Pengesahan Angular 2: Melindungi kandungan peribadi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!