Question

一切都好吗？

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

当我登录时，凭证在后端验证，如果我成功，我会得到一个存储在localstorage中的令牌。

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

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

isLoggedIn：验证是否已发出令牌。

currentUser：将用户数据作为令牌的有效负载。

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

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

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

祝你好运

Answer 1

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

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

确保点击退出

localStorage.setItem（'isLoggedIn'，JSON.stringify（false））; this.currentUser（ “”）;

Answer 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);
}

Answer 3

问题解决了。

我正在使用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
        }
      },

AngularJS SPA需要重新加载以识别localstorage中的jwt标记

3 个答案: