代码之家 › 专栏 › 技术社区 › krekto

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

jwt sails.js express node.js angularjs

krekto · 技术社区 · 7 年前

一切都好吗?

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

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

但是,当我开始向受保护的端点发出请求时,就不可能访问,以至于两个端点都必须重新加载页面,这对于我的SPA AngularJS应用程序来说是一个悲剧。

我还有两种验证方法可用于检查令牌:

isLoggedIn:验证令牌是否尚未颁发。

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

这两个方法由navbar控制器调用,该控制器更新链接和navbar的用户名。

最后一点是:我有一个方法:注销,它排除了令牌,但即使在删除之后,我也必须重新加载页面,否则我仍然可以向受保护的端点发出请求,而必须重新加载我的SPA是一个悲剧。

我希望我已经给了你关于这个问题的所有细节,

顺致敬意,

3 回复 | 直到 7 年前

Garima 7 年前

如果您希望登录后令牌应该与每个请求一起使用,而不刷新您的应用程序,那么您必须创建一个拦截器或服务,在其中您在选项中设置令牌,它将与您的每个请求一起使用。

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

确保单击“注销”

本地存储。setItem('isLoggedIn',JSON.stringify(false)); 这当前用户(“”);

mech user3223097 7 年前

不确定您的身份验证流是什么,但您需要一个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);
}

krekto 7 年前

问题已解决。

我使用了angularjs的$资源,并在如下标题中将令牌作为对象传递,调用直接在对象上调用localstorage的令牌的方法。

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

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

因此,我进行了更改,创建了一个变量标记并调用了调用该标记的方法,然后将变量标记传递给对象中的头。

var token = AuthService.getToken();

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

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