首頁 > web前端 > js教程 > 平均堆棧:構建具有角和角CLI的應用程序

平均堆棧:構建具有角和角CLI的應用程序

尊渡假赌尊渡假赌尊渡假赌
發布: 2025-02-10 15:14:16
原創
565 人瀏覽過

MEAN Stack: Build an App with Angular and the Angular CLI

>本教程在均值堆棧應用程序中通過用戶身份驗證引導您。我們將使用一個常見的架構:一個角度單頁應用程序與node.js,express和mongoDB基於rest api相互作用。

>

密鑰身份驗證方面:

  1. 用戶註冊。
  2. 安全的用戶數據存儲(密碼永遠不會直接存儲)。
  3. >
  4. >用戶登錄。
  5. 會話跨頁訪問。
  6. >受保護頁面的訪問控件(僅登錄用戶才能訪問)。
  7. > 基於登錄狀態(例如,顯示“登錄”或“我的個人資料”按鈕)。
  8. 均值堆棧身份驗證工作流程:

>用戶數據(帶有哈希密碼)位於mongodb中。
    > 在Express API中實現了
  • crud(創建,讀取,更新,刪除)函數
  • Angular App與API相互作用並處理響應。 Express API在註冊/登錄時生成JSON Web令牌(JWTS),將其發送到Angular App。
  • Angular App存儲JWT來管理用戶會話。 Angular App
  • 驗證了受保護視圖的JWT有效性。 JWT比cookie優先用於瀏覽器會話管理; cookies更適合服務器端應用程序。
  • >示例應用程序:
  • 該代碼可在GitHub上獲得。 您需要安裝node.js和mongoDB(請參閱Windows,Linux和MacOS上的MongoDB文檔。
  • Angular應用程序包含四個基本頁面:
  • >主頁

註冊頁

登錄頁面

個人資料頁面(僅適用於身份驗證的用戶)

  • node.js,express和mongodb rest api最初包括以下路由:
  • (post):處理用戶註冊。
  • >
  • (post):處理用戶登錄。

    MEAN Stack: Build an App with Angular and the Angular CLI (get):檢索個人資料詳細信息。

    >

    設置API:

    >使用

    >工具(使用

    >安裝)來創建Express App:>
    express -v pug mean-authentication
    cd mean-authentication
    npm i
    npm i pug@latest
    npm i mongoose
    登入後複製
    如原始教程中所述,創建必要的目錄結構和文件。 提供了

    >,數據庫連接(app.js),API路由(api/models/db.js)和初始控制器stubs(api/routes/index.js>和api/controllers/authentication.js)。 帶有貓鼬的mongodb架構:api/controllers/profile.js

    文件使用mongoose來定義mongodb架構:

    api/models/users.js>密碼管理(哈希和鹽):

    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)
    登入後複製
    >

    >和

    方法使用

    >模塊在不直接存儲密碼的情況下安全地處理密碼。 setPassword方法使用validPassword軟件包來創建JWTS。 crypto passport.js用於身份驗證:generateJwt jsonwebtoken安裝護照和本地策略:

    中的護照:

    npm i passport passport-local
    登入後複製

    updateapi/config/passport.js>初始化護照作為中間件。

    >
    // ... (Passport configuration as described in the original tutorial)
    登入後複製
    > API端點配置:

    app.js>使用寄存器,登錄和配置文件處理邏輯,完成

    文件,包括使用Passport.js和Express-JWT中間件的JWT生成和身份驗證。 使用

    使用CLI創建Angular應用:api/controllers/authentication.js api/controllers/profile.js /api/profile生成必要的組件(express-jwt>,

    )和服務(

    )。 實施

    來處理JWT存儲,檢索,刪除,API調用,登錄狀態檢查和用戶詳細信息檢索。
    ng new client
    登入後複製

    連接角組件和API:register login>使用profile來處理API交互作用,在各個組件中實現寄存器和登錄表單。 將導航欄更新以根據登錄狀態動態顯示“登錄”或用戶的名稱和配置文件鏈接。 使用角路線保護(home)保護authentication>路線。 最後,實現配置文件頁面以獲取和顯示從受保護的API路由的用戶詳細信息。 AuthenticationService>

    運行應用程序:

    >在中配置代理到轉發

    向Express服務器的請求。 啟動Express服務器和Angular App。 測試註冊,登錄和配置文件訪問。 根據需要添加樣式(請參閱GitHub存儲庫以獲取樣式細節)。 AuthenticationService常見問題(常見問題解答):/profileFAQS部分

    以上是平均堆棧:構建具有角和角CLI的應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板