我们如何在没有 NGX- cookie 服务的情况下访问 Angular 6 中的 cookie

Question

  login() : any {
    for(let data of this.loginsdata)
    if(this.username == data.usr && this.password == data.pw){
      // this.toastr.success('logged in');
      console.log(this.username);
      console.log(this.password);
      
      this.router.navigate(['table']);
      
    }
    document.cookie =?

  <script type="text/javascript" src="typescript.compile.min.js"></script>

我想在没有 ng-x cookie 服务等外部模块的情况下访问角度 6 中的 cookie。我想使用设置删除。有什么方法吗？我已经完成了像document.cookie这样的javascript方法，但它的抛出错误

Answer 1

您可以使用以下命令将文档注入到组件/服务中：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {}
}

您以后可以使用

this.document.cookie

您在评论中要求设置删除，但我仍然建议使用 ngx-cookie-service。如果您不想，可以将这些函数添加到组件中：

import { Inject, PLATFORM_ID, InjectionToken, Component } from '@angular/core';
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private readonly documentIsAccessible: boolean;
  constructor(
    @Inject( DOCUMENT ) private document: any,
    @Inject( PLATFORM_ID ) private platformId: InjectionToken<Object>,
  ) {
    this.documentIsAccessible = isPlatformBrowser( this.platformId );
  }
  check( name: string ): boolean {
    if ( !this.documentIsAccessible ) {
      return false;
    }
    name = encodeURIComponent( name );
    const regExp: RegExp = this.getCookieRegExp( name );
    const exists: boolean = regExp.test( this.document.cookie );
    return exists;
  }
  get( name: string ): string {
    if ( this.documentIsAccessible && this.check( name ) ) {
      name = encodeURIComponent( name );
      const regExp: RegExp = this.getCookieRegExp( name );
      const result: RegExpExecArray = regExp.exec( this.document.cookie );
      return decodeURIComponent( result[ 1 ] );
    } else {
      return '';
    }
  }
  getAll(): {} {
    if ( !this.documentIsAccessible ) {
      return {};
    }
    const cookies: {} = {};
    const document: any = this.document;
    if ( document.cookie && document.cookie !== '' ) {
      const split: Array<string> = document.cookie.split(';');
      for ( let i = 0; i < split.length; i += 1 ) {
        const currentCookie: Array<string> = split[ i ].split('=');
        currentCookie[ 0 ] = currentCookie[ 0 ].replace( /^ /, '' );
        cookies[ decodeURIComponent( currentCookie[ 0 ] ) ] = decodeURIComponent( currentCookie[ 1 ] );
      }
    }
    return cookies;
  }
  set(
    name: string,
    value: string,
    expires?: number | Date,
    path?: string,
    domain?: string,
    secure?: boolean,
    sameSite?: 'Lax' | 'Strict'
  ): void {
    if ( !this.documentIsAccessible ) {
      return;
    }
    let cookieString: string = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + ';';
    if ( expires ) {
      if ( typeof expires === 'number' ) {
        const dateExpires: Date = new Date( new Date().getTime() + expires * 1000 * 60 * 60 * 24 );
        cookieString += 'expires=' + dateExpires.toUTCString() + ';';
      } else {
        cookieString += 'expires=' + expires.toUTCString() + ';';
      }
    }
    if ( path ) {
      cookieString += 'path=' + path + ';';
    }
    if ( domain ) {
      cookieString += 'domain=' + domain + ';';
    }
    if ( secure ) {
      cookieString += 'secure;';
    }
    if ( sameSite ) {
      cookieString += 'sameSite=' + sameSite + ';';
    }
    this.document.cookie = cookieString;
  }
  delete( name: string, path?: string, domain?: string ): void {
    if ( !this.documentIsAccessible ) {
      return;
    }
    this.set( name, '', new Date('Thu, 01 Jan 1970 00:00:01 GMT'), path, domain );
  }
  deleteAll( path?: string, domain?: string ): void {
    if ( !this.documentIsAccessible ) {
      return;
    }
    const cookies: any = this.getAll();
    for ( const cookieName in cookies ) {
      if ( cookies.hasOwnProperty( cookieName ) ) {
        this.delete( cookieName, path, domain );
      }
    }
  }
  private getCookieRegExp( name: string ): RegExp {
    const escapedName: string = name.replace( /([[]{}()|=;+?,.*^$])/ig, '\$1' );
    return new RegExp( '(?:^' + escapedName + '|;\s*' + escapedName + ')=(.*?)(?:;|$)', 'g' );
  }
}

Answer 2

使用浏览器的文档对象实现。

// Set Cookiee
// "Secure;HttpOnly;" will work if your site is having SSL certificate.
// You can ignore these 2 attributes in development.
document.cookie = `myKey=${myValue};Path=/;Secure;HttpOnly;`;
// Read Cookiee
const _name = 'myKey',
let value = `; ${document.cookie}`.match(`;\s*${_name}=([^;]+)`);
// Delete Cookiee (using expiration time)
const expires = 'expires=' + new Date().toUTCString();
document.cookie = `myKey=;Path=/;expires=${expires}`;

但是，对于服务器端呈现（Angular 通用）实现，不应使用默认浏览器文档对象。在这种情况下，ngx-cookiee会有所帮助。