What is a Cookie?
A cookie is a small piece of data sent from a
website and stored on the user's machine by the user's web browsers while the
user is browsing.
OR
Cookies are small packages of information that
are typically stored in your browsers and websites tend to use cookies for
multiple things.
Cookies persist across multiple requests and
browser sessions should you set them to and they can be a great method for
authentication in some web apps.
How to install a cookie in Angular?
Install cookie -
npm install ngx-cookie-service –save
If you do not want to install this via NPM, you
can run npm run compile and use the *.d.ts and *.js files in the dist-lib
folder
After installed successfully, add the cookie
service in the Angular module - app.module.ts
import {CookieService} from 'ngx-cookie-service'
//AppModule class with @NgModule decorator
@NgModule({
//Static, this is the compiler
configuration
//declarations is used for configure
the selectors.
declarations: [
AppComponent
],
//Composability and Grouping
//imports used for composing
NgModules together.
imports: [
BrowserModule
],
//Runtime or injector configuration
//providers is used for runtime
injector configuration.
providers: [CookieService],
//bootstrapped entry component
bootstrap: [AppComponent]
})
export class AppModule { }
Then, import and inject it into a component -
import { Component, OnInit } from '@angular/core';
import {CookieService} from 'ngx-cookie-service'
@Component({
selector: 'app-on-click',
templateUrl: './on-click.component.html',
styleUrls: ['./on-click.component.css']
})
export class OnClickComponent implements OnInit {
cookieValue ="";
constructor(private cookie:CookieService) { }
ngOnInit() {
this.cookie.set('cookie', 'demoApp' );
this.cookieValue = this.cookie.get('cookie');
}
}
What are the cookies methods?
Angular cookies concept is very similar to the
Angular 1.x but Angular added only one extra method to delete all cookies.
The All cookie methods are
1. Check
– This method is used to check the cookie existing or not.
2. Get
- This method returns the value of given cookie name.
3. GetAll
- This method returns a value object with all the cookies
4. Set
– This method is used to set the cookies with a name.
5. Delete
– This method used to delete the cookie with the given name
6. deleteAll
– This method is used to delete all the cookies
7. and
so on
Cookie
Methods –
The Angular cookies service contains the following
methods.
export declare class CookieService {
private document;
private documentIsAccessible;
constructor(document: any);
/**
* @param name Cookie name
* @returns {boolean}
*/
check(name: string): boolean;
/**
* @param name Cookie name
* @returns {any}
*/
get(name: string): string;
/**
* @returns {}
*/
getAll(): {};
/**
* @param name Cookie name
* @param value Cookie value
* @param expires Number of days
until the cookies expires or an actual `Date`
* @param path Cookie path
* @param domain Cookie domain
* @param secure Secure flag
*/
set(name: string, value: string, expires?: number | Date, path?: string, domain?: string, secure?: boolean): void;
/**
* @param name Cookie name
* @param path Cookie path
* @param domain Cookie domain
*/
delete(name: string, path?: string, domain?: string): void;
/**
* @param path Cookie path
* @param domain Cookie domain
*/
deleteAll(path?: string, domain?: string): void;
/**
* @param name Cookie name
* @returns {RegExp}
*/
private getCookieRegExp(name);
}
How to set in Angular cookies, type number values?
Why is Token Based Authentication more preferable Then Cookie
based?
The
cookie-based authentication has been the default and the cookie-based
authentication is stateful.
What is Stateful?
Keep and
track the previously stored information which is used for a current
transaction.
A
stateful service based on HTTP cookies uses the HTTP transport protocol and its
ability to convey cookies, used as session context.
What are the 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.
Token
Based Authentication -
The Token-based
authentication has received expansion over last few years due to RESTful Web
APIs, SPA and so on.
The Token
based authentication is stateless.
What is Stateless?
Every
transaction is performed as if it was being done for the very first time and there
is no previously stored information used for the current transaction.
Token
Based Authentication steps -
A user
enters their login credentials and the server verifies the entered credentials.
Validating to the entered credentials, It’s correct or not. If the credentials
are correct, returns a signed token.
This
token is stored in local storage on the client side. We can also store in
session storage or cookie.
Advantages
of Token-Based Authentication -
1. Stateless,
2. Scalable
3. Decoupled
4. JWT is placed in the browsers
local storage
5. Protect Cross Domain and CORS
6. Store Data in the JWT
7. Protect XSS and XSRF Protection
Where to Store Tokens?
It does
depend on you, where you want to store the JWT. The JWT is placed in your
browsers local storage.