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.
– 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.
– SignUp /api/auth/signup:
– Sign In /api/auth/signin:
– Access User Page /api/test/user:
– Access PM Page /api/test/pm:
– Access to Admin page /api/test/admin: