我的身份验证令牌拦截器不拦截新路由的请求/响应

Question

我正在尝试为我的 nodejs、express 和 angularjs 应用程序实现 jwt 身份验证。到目前为止，我已经生成了令牌，并将其存储在我的localStorage 中。根据this教程，我在angular factory中实现了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 调用从加载的页面中发出请求，则会按预期设置身份验证标头。

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYSIsInR5cGUiOiJzYWxlcyIsImlhdCI6MTQyMjI2MDExMCwiZXhwIjoxNDIyMjc4MTEwfQ.Iv6W-Tc8Qm4FGclzmgbtjvWFz_tyDwEvrFmMmucONpY

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

这是错误的链接，以及 GET 请求的标头到未经授权的路由“/sales”：

Answer 1

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

尝试删除或更改它。

参考资料：

• AngularJS Interceptor Never Catches 401 Error
• http://olefriis.blogspot.com/2014/01/http-basic-authentication-in-angularjs.html
• Preventing HTTP Basic Auth Dialog using AngularJS Interceptors

Answer 2

到目前为止，我所了解的是，通常在 javascript 前端框架之前，http 请求的服务方式是：

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

但随着最近转向各种 javascript 前端框架和 RESTful api.s 的使用已经开始，请求需要有授权标头。因此，在许多带有 angularjs 等 JavaScript 框架的单页 Web 应用程序中，

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

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

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

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