我的身份验证令牌拦截器不拦截新路由的 request/response

Question

我正在尝试为我的 nodejs、express 和 angularjs 应用程序实施 jwt 身份验证。到目前为止，我已经生成了令牌，并将其存储在我的 localStorage 中。根据 this 教程，我在 angular 工厂中实现了 authInterceptor 如下：

app.factory('authInterceptor', function ($rootScope, $q, $window) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      if ($window.localStorage.myToken) {
        config.headers.Authorization = 'Bearer ' + $window.localStorage.myToken;

      }
      return config;
    },
    response: function (response) {
      if (response.status === "401") {
        $window.location.replace('/dash');
      }
      return response || $q.when(response);
    }
  };
});

我已将拦截器推送到配置文件中，如下所示：

$httpProvider.interceptors.push('authInterceptor');

到目前为止，我已经将凭据发送到服务器，生成令牌并将其存储在 localStorage。

所以只要我没有从 localStorage 中删除令牌，并且令牌没有过期，我认为它应该会持续存在。如果我使用 angularjs 的后台 ajax 调用从加载的页面中发出请求，则身份验证 header 将按预期设置。

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYSIsInR5cGUiOiJzYWxlcyIsImlhdCI6MTQyMjI2MDExMCwiZXhwIjoxNDIyMjc4MTEwfQ.Iv6W-Tc8Qm4FGclzmgbtjvWFz_tyDwEvrFmMmucONpY

然而，当我导航到新路线时，我的请求和响应都没有被拦截。例如，我有我的“/销售”路线。但是当我从地址栏导航到销售路由时，拦截器没有设置请求认证header，因此服务器返回授权错误401，也没有被拦截；因此不会重定向到 /dash.

这是错误的 link，以及对未授权路由“/sales”的 GET 请求的 header：

Answer 1

您的后端是否发送 WWW-Authenticate header 以及 401 状态？如果是这样，并且它包含 Basic，浏览器将捕获响应并在 Angular 捕获它之前显示凭据弹出窗口。

尝试删除或更改它。

参考文献：

Answer 2

到目前为止我所了解的是，通常在 javascript 前端框架之前如何处理 http 请求是：

我们在地址栏输入url。
浏览器发送请求。
服务器收到请求。
提供必要的 html、js 和 css 文件。
浏览器呈现它。

但是随着最近转向各种 javascript 前端框架并开始使用 RESTful api.s，请求需要获得授权 header。因此，在许多具有 javascript 框架的单页 Web 应用程序中，例如 angularjs，

“/”路由器的初始请求已发送
服务器为浏览器提供 Web 应用程序
Web 应用程序中的所有进一步路由都在前端应用程序中完成，因此 url 之后的“#”。
应用程序通过angular js 向应用程序发出获取、更新、删除或post 的请求。

因此，当从 angular 应用程序发出请求时，它会从 angular 应用程序拦截并由您的拦截器拦截。但是，当从地址栏输入 url 时，浏览器会直接向服务器发送请求，因为在那个请求点，浏览器还没有加载 angular Web 应用程序。

我所做的是将 html5mode 设置为 false 并在路线前放置 #。

喜欢 localhost/#/some-route 并从您的路线提供商那里进行路线选择。当您的路由前有 # 时，对 / 的请求会转到服务器，加载应用程序，然后通过应用程序发送请求。现在从这个some-route，让一些控制器向所需的服务器端点发出请求，这将被拦截器拦截。

我的身份验证令牌拦截器不拦截新路由的 request/response

My authentication token interceptor does not intercept request/response of fresh route

authentication

node.js

jwt

angularjs

express-jwt