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

Posted 2023-03-08

【中文标题】我的身份验证令牌拦截器不拦截新路由的请求/响应

【英文标题】：My authentication token interceptor does not intercept request/response of fresh route

【发布时间】：2015-03-24 16:12:32

【问题描述】：

我正在尝试为我的 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”：

【问题讨论】：

提示：你看过 responseError 吗？

NetworkError: 401 Unauthorized - http://localhost:9090/sales

我很抱歉，我应该更清楚。在某种意义上： responseError: function(rejection) if(rejection.status == 401) //do something with path

这应该进入拦截器还是控制器内部？

它是拦截器的一部分，就像响应和请求一样。我使用 responseError 来检测我的状态是否为 401，然后在我的情况下将用户重定向到登录页面。

【参考方案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

【讨论】：

谢谢...确实有道理...但是尝试实施它...您至少给了我一些先机...

我无法处理 www-authenticate 标头。我正在使用jsonwebtoken 创建令牌，express-jwt 用于拦截服务器上的授权标头，如前所述，使用角度拦截器拦截客户端的响应。

【参考方案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，让一些控制器向所需的服务器端点发出请求，这将被拦截器拦截。

【讨论】：

我似乎遇到了与***.com/questions/36481206/…类似的问题