Angular2 cookie 而不是本地存储

Question

我设法让所有的 JWT 身份验证工作，没有问题，但它只支持现代浏览器，我需要身份验证才能在 IE9 及更高版本的所有浏览器中工作。

我找不到任何关于如何在 Angular2 中使用 cookie 的信息或示例。有一个使用 localStorage 保存令牌的简单示例，我需要相同的功能但使用 cookie 完成。

任何帮助都将非常有用，因为网上没有关于此的任何内容。

this.http.post("http://localhost:3001/sessions/create", creds, { headers: header })
    .map(res => res.json())
    .subscribe(
      data => localStorage.setItem('id_token',data.id_token),
      err => this.logError(err),
      () => console.log("Auth is completed!")
    );

Answer 1

解决这个问题的一个简单方法是使用这个库：

https://www.npmjs.com/package/ng2-cookies

要安装这个库，运行:

$ npm install ng2-cookies

用法：

import { Cookie } from 'ng2-cookies/ng2-cookies';

Cookie.set('cookieName', 'cookieValue');
Cookie.set('cookieName', 'cookieValue', 10 /*days from now*/);
Cookie.set('cookieName', 'cookieValue', 10, '/myapp/', 'mydomain.com');

let myCookie = Cookie.get('cookieName');

/*
* List of cookies as Object, like: { cookieName: "cookieValue", cookieName2: "cookieValue2" ... etc }
*/
let cookielist = Cookie.getAll();

Cookie.delete('cookieName');
Cookie.deleteAll();

Answer 2

我使用 Angular 1 到 Angular 2 的功能实现了 cookie 服务作为可注入服务。还添加了一个 removeAll 函数作为加号。您可以通过以下方式获得它：

npm install angular2-cookie --save

将其作为服务注入后，可以使用Angular1中的方法：

this._cookieService.get(key);
this._cookieService.getObject(key);
// Other available methods are
// put(), putObject(), remove() and removeAll()

您可以查看自述文件部分以获取示例和可用功能。

https://github.com/salemdar/angular2-cookie

Answer 3

为了在 angular 中使用 cookie 第一个运行 npm 命令 npm install angular2-cookie --save,
在 app.module.ts 中注入您的服务后添加

import { CookieService } from 'angular2-cookie/services/cookies.service';

或在提供商中添加服务，

 providers: [CookieService]

将 cookie 添加到您使用的组件后 cookie 有 7 种方法
1.)get():- This method returns the value of given cookie key.
2.)getObject() :- This method is returns the desterilized value of given cookie key.
3.)get all():- This method returns a key-value object with all the cookies.
4.)put():- This method is used to set a value for given cookie key.
5.)putObject():- This method is used to serializes and set a value for given cookie key.
6.)remove(): -This method is used to remove given cookie.
7.)remove all(): -This method is used to remove all cookies.

对于 cookie 中的 put/set 值：this._cookieService.put('key:string', 'value:string'); 这里的键作为您的 cookie 名称例如：user1 值用于设置 any value.

在 cookie 中获取值：this._cookieService.get('key');

从组件中删除 cookie 然后 this._cookieService.remove('key');

Angular2 cookie 而不是本地存储

Angular2 cookies instead of localstorage

html

javascript

cookies

angular