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

This tutorial guides you through user authentication in a MEAN stack application. We'll use a common architecture: an Angular single-page app interacting with a Node.js, Express, and MongoDB-based REST API.

Key Authentication Aspects:

1. User registration.
2. Secure user data storage (passwords are never stored directly).
3. User login.
4. Session persistence across page visits.
5. Access control for protected pages (only accessible to logged-in users).
6. Dynamic UI updates based on login status (e.g., showing "Login" or "My Profile" buttons).

MEAN Stack Authentication Workflow:

• User data (with hashed passwords) resides in MongoDB.
• CRUD (Create, Read, Update, Delete) functions are implemented in the Express API.
• The Angular app interacts with the API and handles responses.
• The Express API generates JSON Web Tokens (JWTs) upon registration/login, sending them to the Angular app.
• The Angular app stores the JWT to manage user sessions.
• The Angular app verifies JWT validity for protected views.
• The Angular app sends the JWT back to Express when accessing protected API routes.

JWTs are preferred over cookies for browser session management; cookies are better suited for server-side applications.

Example Application:

The code is available on GitHub. You'll need Node.js and MongoDB installed (refer to MongoDB's documentation for installation instructions on Windows, Linux, and macOS).

Angular App Structure:

The Angular app comprises four basic pages:

1. Home page
2. Register page
3. Login page
4. Profile page (accessible only to authenticated users)

The Angular CLI is used for building and running the local server. Refer to the "Building a Todo App with Angular CLI" tutorial for guidance if needed.

REST API Structure:

The Node.js, Express, and MongoDB REST API initially includes these routes:

1. /api/register (POST): Handles user registration.
2. /api/login (POST): Handles user login.
3. /api/profile/:userid (GET): Retrieves profile details.

Setting up the API:

Use the express-generator tool (install with npm i -g express-generator) to create the Express app:

<code class="language-bash">express -v pug mean-authentication
cd mean-authentication
npm i
npm i pug@latest
npm i mongoose</code>

Create the necessary directory structure and files as described in the original tutorial. The app.js, database connection (api/models/db.js), API routes (api/routes/index.js), and initial controller stubs (api/controllers/authentication.js and api/controllers/profile.js) are provided.

MongoDB Schema with Mongoose:

The api/models/users.js file defines the MongoDB schema using Mongoose:

<code class="language-javascript">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)</code>

Password Management (Hashing and Salting):

The setPassword and validPassword methods use the crypto module to securely handle passwords without storing them directly. The generateJwt method uses the jsonwebtoken package to create JWTs.

Passport.js for Authentication:

Install Passport and the local strategy:

<code class="language-bash">npm i passport passport-local</code>

Configure Passport in api/config/passport.js:

<code class="language-javascript">// ... (Passport configuration as described in the original tutorial)</code>

Update app.js to initialize Passport as middleware.

API Endpoint Configuration:

Complete the api/controllers/authentication.js and api/controllers/profile.js files with the register, login, and profile handling logic, including JWT generation and authentication using Passport.js and express-jwt middleware. Secure the /api/profile route using express-jwt.

Angular App Initialization and Service:

Create the Angular app using the CLI:

<code class="language-bash">ng new client</code>

Generate the necessary components (register, login, profile, home) and a service (authentication). Implement the AuthenticationService to handle JWT storage, retrieval, deletion, API calls, login status checks, and user detail retrieval.

Connecting Angular Components and API:

Implement the register and login forms in the respective components, using the AuthenticationService to handle API interactions. Update the navigation bar to dynamically display "Sign in" or the user's name and profile link based on login status. Protect the /profile route using an Angular route guard (AuthGuard). Finally, implement the profile page to fetch and display user details from the protected /api/profile API route.

Running the Application:

Configure a proxy in client/proxy.conf.json to forward /api requests to the Express server. Start the Express server and the Angular app. Test registration, login, and profile access. Add styling as desired (refer to the GitHub repository for styling details).

Frequently Asked Questions (FAQs):

The FAQs section provides answers to common questions about MEAN stack development, including its differences from other frameworks, the role of Angular CLI, database options, data handling, scalability, security, learning resources, and the role of Node.js. The answers are paraphrased for conciseness and clarity.

The above is the detailed content of MEAN Stack: Build an App with Angular and the Angular CLI. For more information, please follow other related articles on the PHP Chinese website!