如何在 Angular 8 中存储 jwt 令牌之类的数据？是不是有另一种使用本地存储或会话存储安全存储的方法？

Posted 2023-03-10

【中文标题】如何在 Angular 8 中存储 jwt 令牌之类的数据？是不是有另一种使用本地存储或会话存储安全存储的方法？

【英文标题】：How to store data like jwt token in Angular 8? Is there another way to store safely using localstorage or session storage?如何在 Angular 8 中存储 jwt 令牌之类的数据？是否有另一种使用本地存储或会话存储安全存储的方法？

【发布时间】：2020-04-17 22:49:56

【问题描述】：

我正在使用 JWT 令牌来授权来自 Angular 8 网站对我的 API 的请求。但是我在哪里存储这个对用户不可见的令牌？我曾尝试使用服务，但刷新页面令牌后丢失。

【问题讨论】：

有什么特殊原因吗？可以将令牌保存在本地存储中

@igor_c 好的，但想安全地存储敏感数据。

【参考方案1】：

您可以使用 cookie 来存储令牌，而不是本地存储或会话存储，但这不会使其安全。即使加密 cookie 或本地存储也不是一种万无一失的机制，因为加密的密钥要么驻留在客户端，要么从服务器传递。这使得它容易被修改。

为了实现处理令牌的安全机制，我建议你看看at this answer

为了替代本地存储或会话存储，您可以使用 cookie，如下所示：

你可以安装这个包https://www.npmjs.com/package/ng2-cookies

然后你可以简单地按照步骤操作

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

//setter for token
Cookie.set('jwtToken', 'tokenValue');
//getter for token
let token = Cookie.get('jwtToken');
//delete token cookie
Cookie.delete('jwtToken');

或者您可以为 Angular 4 及更高版本安装 NGX Cookie Service

安装

npm install ngx-cookie-service --save

导入并注入到您的组件中

import  CookieService  from 'ngx-cookie-service';
export class AppComponent implements OnInit 


  constructor( private cookieService: CookieService, private _authService: AuthService )  

  ngOnInit(): void 
    //call your auth service to get the token, I have made a call to a dummy auth service to fetch the token
    var token = _authService.GetToken();
    //Set auth token cookie
    this.cookieService.set( 'authToken', token );
    //get auth token cookie
    this.cookieValue = this.cookieService.get('authToken');
  

【讨论】：

这仍然不安全。用户可以操作客户端设备（浏览器）上的任何内容。

@nightElf91 绝对是，OP 要求选择在不使用本地存储或会话存储的情况下存储令牌，我同意您在客户端加密事物的观点没有意义，因为密钥是存储在客户端代码中，容易被修改

不得不说，因为问题标题中包含“安全”一词！