Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example
Male avatar

loveprogramming viết ngày 10/11/2020

Tutorial Link: Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example

“How to implement Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example?” is always a big common question in development world? So in the tutorial, I guide you very clearly how to build a full stack example to demonstrate an JWT Authentication flow from Angular (signup & signin with by JWT Token) to backend: Nodejs and database MySQL.

Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example

Angular 10 Nodejs/Express JWT token based Authentication example

We will build an application, from frontend (Angular) to backend (Nodejs/Express), which allows users to register, login account. This application is secured with JWT (JSON Web Token) authentication and Nodejs middleware security. Then, depending on the role of current User (user, pm or admin), this system accepts what he can access:

Angular 10 Nodejs/Express JWT token based Authentication example

Jack login

Angular Nodejs Security Jwt Authentication Work Process Diagram

NODEJS/EXPRESS BACK-END WITH MIDDLEWARE SECURITY

Angular Nodejs Jwt Authentication Architecture Diagram Back End Server<br>

HTTP request that matches route will be accepted by CORS Middleware before coming to Security layer.

Security layer includes:
– JWT Authentication Middleware: verify SignUp, verify token
– Authorization Middleware: check User’s roles

Main Business Logic Processing interacts with database via Sequelize and send HTTP response (token, user information, data based on roles…) to client.

ANGULAR FRONT-END WITH INTERCEPTOR

ANGULAR FRONT-END WITH INTERCEPTOR

– app.component is the parent component that contains routerLink and router-outlet for routing. It also has an authority variable as the condition for displaying items on navigation bar.
– user.component, pm.component, admin.component correspond to Angular Components for User Board, PM Board, Admin Board. Each Board uses user.service to access authority data.
– register.component contains User Registration form, submission of the form will call auth.service.
– login.component contains User Login form, submission of the form will call auth.service and token-storage.service.

– user.service gets access to authority data from Server using Angular HttpClient ($http service).
– auth.service handles authentication and signup actions with Server using Angular HttpClient ($http service).
– every HTTP request by $http service will be inspected and transformed before being sent to the Server by auth-interceptor (implements HttpInterceptor).
– auth-interceptor check and get Token from token-storage.service to add the Token to HTTP Request Header.

– token-storage.service manages Token inside Browser’s sessionStorage.

Tutorial Link: Angular 10 + Nodejs JWT Token Based Authentication with MySQL Example

Youtube Guide

https://youtu.be/rYmf_MthobU

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

11 bài viết.
13 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
11 bài viết.
13 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!