Login and Logout using Web API with Token Based Authentication - Angular 6 / Angular 7

Posted at: December 15, 2018 5:47 PM

Admin Module

Admin and Auth module already created. Please see this link Project Structure and Create Modules and Components

Next, Generate the supporting components.

AuthService

The AuthGuard should call an application service that can login a user and retain information about the current user. Generate a new AuthService in the auth folder.

Create method login, logout and getAuthorizationToken

Edit file auth.service.ts

Guard the admin feature

Generate an AuthGuard in the auth folder.

The new admin feature should be accessible only to authenticated users.

You protected the admin feature module from unauthorized access.

This is a general purpose guard—you can imagine other features that require authenticated users—so you generate an AuthGuard in the auth folder.

You can also protect child routes with the CanActivateChild guard. The CanActivateChild guard is similar to the CanActivate guard. The key difference is that it runs before any child route is activated.

Edit file auth.guard.ts

Edit app.module.ts

Import the AdminModule and AuthModule into app.module.ts and add it to the imports array to register the admin routes.

Admin routing configuration:

Component-less route: grouping routes without a component

Import the AuthGuard class, and update the admin route with a canActivate guard property.

Edit file admin/admin-routing.module.ts

The admin feature module contains the AdminComponent used for routing within the feature module, a dashboard route and 3 components to manage blogs, categories and pages.

Edit file src/app/admin/admin/admin.component.html

AuthInterceptor

HTTP Interception is a major feature of @angular/common/http. With interception, you declare interceptors that inspect and transform HTTP requests from your application to the server. The same interceptors may also inspect and transform the servers responses on their way back to the application.

Import AuthService into http-interceptors/auth-interceptor.ts

Consider creating a "index.ts" file that gathers all the interceptor providers into an httpInterceptorProviders array, starting with this first one, the AuthInterceptor.

http-interceptors/index.ts

Note the multi: true option. This required setting tells Angular that HTTP_INTERCEPTORS is a token for a multiprovider that injects an array of values, rather than a single value.

Then import and add it to the AppModule providers array like this

Import httpInterceptorProviders into app.module.ts

Auth Routing

Import LoginComponent into auth-routing.module.ts and create route for login.

AuthModule

Import ReactiveFormsModule into auth.module.ts

Login Component

Import AuthService, FormBuilder, Validators, FormGroup, Router into login.component.ts

Create login form login.component.html

Header Component

Import AuthService into header.component.ts and get isLoggedIn.

Edit header component.html for login, logout and admin dashboard.

Edit both file blogpost.service.ts and cmspage.service.ts

Import HttpBackend into blogpost.service.ts and cmspage.service.ts

Interceptors sit between the HttpClient interface and the HttpBackend.

When injected, HttpBackend dispatches requests directly to the backend, without going through the interceptor chain.

In this way the service is not intercepted by AuthInterceptor.

Replace this code

with

Changes in API

Open controller file Api.php and create login method

Open model file Api_model.php and create login method

Database

Add token field in users table.

This lesson also available on YouTube
LoginLogouttokenWeb APIAuthenticationGuardInterceptors

More Posts - Angular Project Training

Download Theme
Download Web API
Download Angular App
Watch Video for Project Setup
Watch Videos of More Tutorials

Angular 6/7 Tutorial in Hindi

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications.

truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.

truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Angular 6 / Angular 7 Tutorial in Hindi

Please leave comments

13 Comments