Maksud Stack: Bina aplikasi dengan sudut dan CLI sudut

Tutorial ini membimbing anda melalui pengesahan pengguna dalam aplikasi stack min. Kami akan menggunakan seni bina biasa: aplikasi satu halaman sudut berinteraksi dengan node.js, Express, dan MongoDB REST API.

Aspek Pengesahan Utama:

Pendaftaran Pengguna.
1. penyimpanan data pengguna yang selamat (kata laluan tidak pernah disimpan secara langsung).
2. Log masuk pengguna.
3. ketekunan sesi di seluruh lawatan halaman.
4. Kawalan akses untuk halaman yang dilindungi (hanya boleh diakses oleh pengguna log masuk).
5. kemas kini UI dinamik berdasarkan status log masuk (mis., Menunjukkan butang "Login" atau "Profil saya").
aliran kerja pengesahan stack:

data pengguna (dengan kata laluan hashed) tinggal di mongoDB.

• fungsi CRUD (Buat, Baca, Kemas kini, Padam) dilaksanakan di API Express.
• aplikasi sudut berinteraksi dengan API dan mengendalikan respons.
• API Express menghasilkan token web JSON (JWTS) semasa pendaftaran/log masuk, menghantarnya ke aplikasi sudut.
• aplikasi sudut menyimpan JWT untuk menguruskan sesi pengguna.
• aplikasi sudut mengesahkan kesahihan JWT untuk pandangan yang dilindungi.
• aplikasi sudut menghantar kembali JWT untuk menyatakan apabila mengakses laluan API yang dilindungi.
JWTS lebih disukai daripada kuki untuk pengurusan sesi penyemak imbas; Kuki lebih sesuai untuk aplikasi sisi pelayan.

Contoh Aplikasi:

Kod ini boleh didapati di GitHub. Anda memerlukan Node.js dan MongoDB yang dipasang (rujuk dokumentasi MongoDB untuk arahan pemasangan pada Windows, Linux, dan MacOS).

struktur aplikasi sudut:

aplikasi sudut terdiri daripada empat halaman asas:

Halaman Laman Utama

Laman Daftar
1. halaman login
2. Halaman profil (hanya boleh diakses untuk pengguna yang disahkan)
CLI sudut digunakan untuk membina dan menjalankan pelayan tempatan. Rujuk kepada tutorial "Bangunan Todo dengan Angular CLI" untuk bimbingan jika diperlukan.

REST API Struktur:

API Node.js, Express, dan MongoDB pada mulanya termasuk laluan ini:

(pos): Mengendalikan Pendaftaran Pengguna.

(pos): Mengendalikan log masuk pengguna.
1. /api/register
(GET): Mendapatkan butiran profil.
2. /api/login
Menyediakan API:
3. /api/profile/:userid Gunakan alat
(pasang dengan

) untuk membuat aplikasi ekspres:

express -v pug mean-authentication
cd mean-authentication
npm i
npm i pug@latest
npm i mongoose

Buat struktur dan fail direktori yang diperlukan seperti yang diterangkan dalam tutorial asal. Sambungan pangkalan data app.js, (api/models/db.js), laluan API (api/routes/index.js), dan stub pengawal awal (api/controllers/authentication.js dan api/controllers/profile.js) disediakan.

skema mongoDB dengan mongoose:

Fail api/models/users.js mentakrifkan skema MongoDB menggunakan Mongoose:

const mongoose = require('mongoose');
const crypto = require('crypto');
const jwt = require('jsonwebtoken');

// ... (Schema definition and setPassword, validPassword, generateJwt methods as described in the original tutorial)

Pengurusan Kata Laluan (Hashing and Salting):

kaedah setPassword dan validPassword menggunakan modul crypto untuk mengendalikan kata laluan dengan selamat tanpa menyimpannya secara langsung. Kaedah generateJwt menggunakan pakej jsonwebtoken untuk membuat JWTS.

pasport.js untuk pengesahan:

Pasang pasport dan strategi tempatan:

npm i passport passport-local

Konfigurasikan pasport dalam api/config/passport.js:

// ... (Passport configuration as described in the original tutorial)

Kemas kini app.js untuk memulakan pasport sebagai middleware.

Konfigurasi endpoint API:

Lengkapkan fail api/controllers/authentication.js dan api/controllers/profile.js dengan logik pengendalian, log masuk, dan profil, termasuk generasi dan pengesahan JWT menggunakan pasport.js dan middleware Express-JWT. Selamatkan laluan /api/profile menggunakan express-jwt.

inisialisasi aplikasi sudut dan perkhidmatan:

Buat aplikasi sudut menggunakan CLI:

ng new client

Menjana komponen yang diperlukan (register, login, profile, home) dan perkhidmatan (authentication). Melaksanakan AuthenticationService untuk mengendalikan penyimpanan JWT, pengambilan semula, penghapusan, panggilan API, pemeriksaan status log masuk, dan pengambilan detail pengguna.

Menghubungkan Komponen Angular dan API:

Melaksanakan borang daftar dan log masuk dalam komponen masing -masing, menggunakan AuthenticationService untuk mengendalikan interaksi API. Kemas kini bar navigasi untuk memaparkan "log masuk" secara dinamik atau pautan nama dan profil pengguna berdasarkan status log masuk. Lindungi laluan /profile menggunakan pengawal laluan sudut (). Akhirnya, laksanakan halaman profil untuk mengambil dan memaparkan butiran pengguna dari laluan API AuthGuard yang dilindungi. /api/profile

Menjalankan aplikasi:

Konfigurasikan proksi dalam

untuk memajukan client/proxy.conf.json permintaan ke pelayan Express. Mulakan pelayan Express dan aplikasi sudut. Pendaftaran ujian, log masuk, dan akses profil. Tambah gaya seperti yang dikehendaki (rujuk repositori github untuk butiran gaya). /api

Soalan Lazim (Soalan Lazim):

Seksyen Soalan Lazim memberikan jawapan kepada soalan -soalan umum mengenai pembangunan stack min, termasuk perbezaannya dari kerangka lain, peranan CLI sudut, pilihan pangkalan data, pengendalian data, skalabilitas, keselamatan, sumber pembelajaran, dan peranan node.js. Jawapannya disahkan untuk kesimpulan dan kejelasan.

Atas ialah kandungan terperinci Maksud Stack: Bina aplikasi dengan sudut dan CLI sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!