Login and Logout using Web API with Token Based Authentication - Angular 6 / Angular 7
Admin and Auth module already created. Please see this link Project Structure and Create Modules and Components
Next, Generate the supporting components.
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
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
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.
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
Import LoginComponent into auth-routing.module.ts and create route for login.
Import ReactiveFormsModule into auth.module.ts
Import AuthService, FormBuilder, Validators, FormGroup, Router into login.component.ts
Create login form login.component.html
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
Changes in API
Open controller file Api.php and create login method
Open model file Api_model.php and create login method
Add token field in users table.
Please click below YouTube button for subscribe my channel RSGiTECH for latest videos.
Angular Project Login - username: admin and password: admin
Angular 6/7 Tutorial in Hindi
RSGiTECH provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.
RSGITECH will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.