如何在同一个 Angular JS 应用程序中使用具有不同身份验证标头的不同 API

Posted 2023-03-07

【中文标题】如何在同一个 Angular JS 应用程序中使用具有不同身份验证标头的不同 API

【英文标题】：How to use different API's with different Authentication headers in the same Angular JS App

【发布时间】：2016-07-29 13:55:56

【问题描述】：

您好，我只是一个 AngularJs 初学者，希望得到你们的一些建议/帮助！

我正在制作一个应用程序，您可以在其中通过 Cisco CMX 服务器登录并检查您在建筑物中的当前位置。 它是一个服务器，通过您连接的几个接入点的信息来计算您的位置

我需要与 mongodb 通信以验证用户身份，为此我使用令牌。

当我登录后，我想使用另一个身份验证标头访问 CMX 的 API。

但我看不出它是如何工作的。

我在运行时在 app.js 中设置了默认标头

$http.defaults.headers.common['Authorization'] = 'Bearer ' + $window.jwtToken;

当我想使用 CMX API 时，我会更改我的默认标头

$http.defaults.headers.common['Authorization'] = 'Basic AAAAAAAAAAAAAAAAAAAAA==';

但它不会做的伎俩..

通过网络服务器本身而不是客户端与 CMX 通信不是更好吗？

谢谢

【参考方案1】：

在您的情况下，您希望拦截每个 HTTP 请求并将其注入包含自定义令牌的 Authorization 标头。

为此，您需要使用 angularjs 拦截器。

---

拦截器是注册到 $httpProvider 通过将它们添加到 $httpProvider.interceptors 数组。 调用工厂并注入依赖项（如果指定） 并返回拦截器

---

这是一个拦截器示例，如果它在浏览器的本地存储中可用，则注入令牌。

    $httpProvider.interceptors.push(['$q', '$location', '$localStorage', function ($q, $location, $localStorage) 
   return 
       'request': function (config) 
           config.headers = config.headers || ;
           if ($localStorage.token) 
               config.headers.Authorization = 'Bearer ' + $localStorage.token;
           
           return config;
       ,
       'responseError': function (response) 
           if (response.status === 401 || response.status === 403) 
               $location.path('/signin');
           
           return $q.reject(response);
       
   ;
]);

代码启发 from