6

Angular Cookies QAs

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-servicesave

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.
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular Cookies QAs Angular Cookies QAs Reviewed by Anil Singh on 10:01 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^