The cookie based authentication
has been the default and the cookie based authentication is stateful.
Stateful – keep and
track of the previously stored information which is used for current
transaction.
A Stateful service based on HTTP Cookies uses the HTTP transport protocol and its ability to convey cookies, used as session context.
Cookies
Methods -
Check (name: string): Boolean;
//Check Cookies
const IsCookieExists: boolean = this.cookieService.check('cookieApp');
Get (name: string): string;
//Get Cookies
this.cookieValue = this.cookieService.get('cookieApp');
getAll(): {};
//Get all cookies
const allCookies: {} = this.cookieService.getAll();
Delete (name: string, path?: string, domain?:
string ): void;
//delete cookies
this.cookieService.delete('cookieApp');
deleteAll ( path?: string, domain?: string ):
void;
//delete all cookies
this.cookieService.deleteAll();
Example
for Cookies methods–
Steps
1-
Install cookies in your project using below command –
In the above, “D:\Angular\ServiceDemo>” is my
project directory and
Steps 2 - Import “ngx-cookie-service” in your “app.module.ts” and its looks like –
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ NgModule } from
'@angular/core';
import
{RouterModule} from
'@angular/router';
import
{ HttpModule } from
'@angular/http';
import
{ FormsModule, ReactiveFormsModule
} from '@angular/forms';
import
{ BrowserAnimationsModule
} from '@angular/platform-browser/animations';
import
{DateServiceService} from
'../app/date-service.service';
import
{ AppComponent } from
'./app.component';
import
{ UserComponent } from
'./user/user.component';
import
{ BillComponent } from
'./bill/bill.component';
import
{BillService} from
'../app/bill.service';
import
{ CookieService } from
'ngx-cookie-service';
@NgModule({
declarations: [
AppComponent,
UserComponent,
BillComponent
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot([
{
path:'app-user',
component : UserComponent
},
{
path:'app-bill',
component : BillComponent
}
])
],
providers: [DateServiceService,
BillService, CookieService],
bootstrap: [AppComponent]
})
export
class AppModule
{ }
Steps
3 –
Import “CookieService” in your “app.component.ts” and its looks like
import
{ Component } from
'@angular/core';
import
{DateServiceService}
from '../app/date-service.service';
import
{ CookieService } from
'ngx-cookie-service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export
class AppComponent
{
title = 'Angular
App';
todayDate;
cookieValue = 'Anil
Singh';
constructor(private
dateService : DateServiceService,
private
cookieService: CookieService){
this.todayDate
= dateService.getTodayDate();
}
ngOnInit(): void
{
//Set cookies
this.cookieService.set('cookieApp',
'Welcome you, Anil!'
);
//Get Cookies
this.cookieValue
= this.cookieService.get('cookieApp');
// //Check Cookies
// const IsCookieExists: boolean =
this.cookieService.check('cookieApp');
// //Get Cookies
// const value: string =
this.cookieService.get('cookieApp');
// //Get all cookies
//
const allCookies: {} = this.cookieService.getAll();
// //delete cookies
// this.cookieService.delete('cookieApp');
// //delete all cookies
// this.cookieService.deleteAll();
}
}
Cookies Limitations –
We can only store around 20 cookies per web server and not more than 4KB of information in each cookie and they can last indefinitely should you choose to specify the max-age attribute.
I hope you are enjoying with this post! Please share with you friends. Thank you!!