AngularJS SPA 需要重新加载以识别 localstorage 中的 jwt 令牌

Posted 2023-03-07

【中文标题】AngularJS SPA 需要重新加载以识别 localstorage 中的 jwt 令牌

【英文标题】：AngularJS SPA needs to reload to recognize the jwt token in localstorage

【发布时间】：2018-08-04 11:49:33

【问题描述】：

一切都好吗？

今天我需要您的帮助来解决我的 SPA AngularJS 应用程序中的令牌身份验证问题 (jwt)（我在后端使用 NodeJS）。

当我登录时，凭据会在后端进行验证，如果成功，我会获得一个存储在本地存储中的令牌。

但是当我开始向受保护的端点发出请求时，它无法访问，足以使两者都必须重新加载页面，这对我的 SPA AngularJS 应用程序来说是一个悲剧。

我还有两种用于检查令牌的验证方法：

isLoggedIn: 验证令牌尚未发出。

currentUser：获取令牌有效负载中的用户数据。

这两个方法由导航栏控制器调用，更新导航栏的链接和用户名。

最后一点是：我有一个方法：注销，它不包括令牌，但即使删除后我也必须重新加载页面，否则我仍然可以向受保护的端点发出请求，并且不得不重新加载我的 SPA 是一个悲剧.

我希望我已经向您提供了有关问题的所有详细信息，

最好的问候

【问题讨论】：

我发现问题出在使用 $ 资源发出的请求中，当我使用 $ http 时它工作正常，但我需要使用 $ 资源，因为我正在使用 Restful api。因此，简要总结一下我在 $ 资源中传递 jwt 标头的方式存在什么问题。但是正确的方法是什么？

【参考方案1】：

问题解决了。

我使用的是angularjs的$资源，并将token作为对象传递到headers中，如下所示，直接在对象上调用调用localstorage的token的方法。

return $resource('user/:userId', null, 

      'update': 
        method: 'PUT',
        headers: 
          Authorization: 'Bearer ' + AuthService.getToken();
        
      ;

所以我改了，创建了一个变量token并调用了调用token的方法，然后把变量token传给了对象中的headers。

var token = AuthService.getToken();

    return $resource('user/:userId', null, 

      'update': 
        method: 'PUT',
        headers: 
          Authorization: 'Bearer ' + token
        
      ,

【参考方案2】：

不确定您的身份验证流程是什么，但您需要一个可以根据当前状态获取或发布令牌的 http 服务。

类似

  get(url: string, options?: RequestOptionsArgs, silent: boolean = false): Observable<Response> 
  let getStream = () => 
    return Observable.from([true])
      .flatMap((_) => 
        if (!silent) this.beginActivity();
        return this.authHttp.get(url, this.prepareOptionsForJsonApi(options));
      )
      .catch((res) =>  return this.handleError(res); )
      .do(noop,
      (error) =>  this.publishError(error); ,
      () =>  if (!silent) this.endActivity(); );
  ;

  return this.whenTokenReady(getStream);


  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> 
  let postStream = () => 
    return Observable.from([true])
      .flatMap((_) => 
        this.beginActivity();
        return this.authHttp.post(url, body, this.prepareOptionsForJsonApi(options));
      )
      .catch((res) =>  return this.handleError(res); )
      .do(noop,
      (error) =>  this.publishError(error); ,
      () =>  this.endActivity(); );
  ;

  return this.whenTokenReady(postStream);

【参考方案3】：

如果您希望在不刷新应用程序的情况下在每个请求中使用登录令牌，那么您必须创建一个拦截器或服务，在其中设置您的令牌选项，它会随您的每个请求一起使用。

You can refer to this article and let me know further if any query (Click me!).

确保点击退出

localStorage.setItem('isLoggedIn', JSON.stringify(false)); this.currentUser("");