如何将 JWT 保存到 localStorage

Posted 2023-03-08

【中文标题】如何将 JWT 保存到 localStorage

【英文标题】：How to save JWT to localStorage

【发布时间】：2017-11-03 04:33:06

【问题描述】：

我正在为登录/注册功能使用 Angular-satellizer 扩展，但我被困在第 7 位。我无法将 JWT 保存到 localStorage。我在chrome中查看了开发者工具，但是没有token。

.controller('loginCtrl', function($scope, $state, $auth, jwtHelper, $window) 
$scope.login = function() 

  $auth.login($scope.user)

    .then(function(response) 

    var gelenToken = response.data;

    var tokenPayload = jwtHelper.decodeToken(gelenToken.token);

    console.log(JSON.stringify(tokenPayload)); // Output:"sub":"1","iat":1496346513,"exp":1497556113,"data":"role":"admin"

    $window.localStorage.setItem('token', JSON.stringify(tokenPayload));

    $state.go('baba.manga');
    )
;
)

【问题讨论】：

我不是 Angularjs 人，但我认为您不必使用 $window.localStorage，我认为 localStorage 会很好，除非 Angularjs 阻止您访问全局变量。不过，这可能不是您的解决方案。

另外，你想存储解码后的令牌还是编码后的令牌？

你们说得对。这次我可以在我的开发者工具中看到这个令牌。但是当我刷新页面时，它又消失了，satellizer 看不到令牌。

【参考方案1】：

你可以同时使用：

localStorage.setItem('token', data.token);

或

$window.localStorage.token = JSON.stringify(data.token);

如果它在页面刷新时被删除，那么您需要检查您是否在某处重置了 localStorage 或某个脚本正在执行此操作

【参考方案2】：

我在后端使用带有 Angular 4 和 Node JS 的 JWT。我认为你不需要使用 $window。

  ......
  data =>   
    localStorage.setItem('token', data.token);
    localStorage.setItem('userId', data.userId);
    this.router.navigateByUrl('/');
  ,
  ......

这应该可以，如果不行，请提供 plunker/git 的链接，我会看看。

【讨论】：

你是对的。这次我可以在我的开发者工具中看到这个令牌。但是当我刷新页面时，它又消失了，satellizer 看不到令牌。