AngularJS SPA 需要重新加载以识别本地存储中的 jwt 令牌

Question

一切都好吗？

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

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

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

我还有两种验证方法可以用来检查令牌：

isLoggedIn：验证令牌尚未颁发。

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

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

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

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

此致

Answer 1

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

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

确保点击注销

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

Answer 2

不确定您的身份验证流程是什么，但您需要一个 http-service 来获取或 post 基于当前状态的令牌。

类似

  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的$资源，如下在headers中将token作为对象传递，直接在对象上调用调用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
        }
      },

AngularJS SPA 需要重新加载以识别本地存储中的 jwt 令牌

AngularJS SPA needs to reload to recognize the jwt token in localstorage

node.js

express

jwt

angularjs

sails.js