Angular+RESTful Client-side Communication w/ API for Auth/(re)Routing

This has been covered in a few different questions, and in a few different tutorials, but all of the previous resources I've encountered don't quite hit the nail on the head.

In a nut-shell, I need to

• Login via POST from http://client.foo to http://api.foo/login
• Have a "logged in" GUI/component state for the user that provides a logout route
• Be able to "update" the UI when the user logs out / logs out. This has been the most frustrating
• Secure my routes to check for authenticated-state (should they need it) and redirect the user to the login page accordingly

My issues are

• Every time I navigate to a different page, I need to make the call to api.foo/status to determine whether or not user is logged in. (ATM I'm using Express for routes) This causes a hiccup as Angular determines things like ng-show="user.is_authenticated"
• When I successfully login/logout, I need to refresh the page (I don't want to have to do this) in order to populate things like {{user.first_name}}, or in the case of logging out, empty that value out.

What I've tried

• http://witoldsz.github.io/angular-http-auth/¹
• http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/²
• https://github.com/mgonto/restangular (For the life of me I could not figure out how to POST with post data and not query params. The docs turned up nothing on the matter.

Why I feel like I'm losing my mind

• It seems as though every tutorial relies on some database (lots of Mongo, Couch, PHP+MySQL, ad infinitum) solution, and none rely purely on communication with a RESTful API to persist logged-in states. Once logged in, additional POSTs/GETs are sent with withCredentials:true, so that's not the issue
• I cannot find ANY examples/tutorials/repos that do Angular+REST+Auth, sans a backend language.

I'm not too proud

Admittedly, I'm new to Angular, and would not be surprised if I'm approaching this in a ridiculous way; I'd be thrilled if someone suggest an alternative—even if it's soup-to-nuts.

I'm using Express mostly because I really love Jade and Stylus— I'm not married to the Express' routing and will give it up if what I want to do is only possible with Angular's routing.

Thanks in advance for any help anyone can provide. And please don't ask me to Google it, because I have about 26 pages of purple links. ;-)

¹This solution relies on Angular's $httpBackend mock, and it's unclear how to make it talk to a real server.

²This was the closest, but since I have an existing API I need to authenticate with, I could not use passport's 'localStrategy', and it seemed insane to write an OAUTH service...that only I intended to use.

我正在尝试将自定义标头注入每个 API 请求。当我提供一些硬编码文本时，它可以工作。

工作代码

不工作的代码

错误，尝试注入时$route

未捕获的错误：[$injector:cdep] 找到循环依赖项：$route <- $http http://errors.angularjs.org/1.2.3/ $injector/cdep?p0=%24route%20%3C-%20% 24http

我试图在 AngularJS 中制作一个拦截器。我对 AngularJS 很陌生，发现了一些 Interceptor 的例子，但无法让它工作。

在这里，我有我的 app.js 文件，其中包含所有相关代码。我还有一个控制器，它调用 REST api 并返回 JSONP。

首先我声明模块然后配置它（定义拦截器）。它现在应该捕获所有请求并输出到控制台...

用 app.factory 创建 Interceptor 有错吗？

我按照这篇文章在一个项目上实现了一个类似的 ajax 加载器图像：

• 使用 httpInterceptor 和 AngularJS 1.1.5 实现加载微调器

我的实现有一些不同之处：

• 我使用$rootScopetoemit和 not broadcast，我也使用$rootScopeon 指令来处理事件。
• 由于项目的特殊性，我必须$rootScope.$on在事件处理程序内的第一个事件被触发（显示或隐藏）之后立即取消绑定指令侦听器。
• 我只触发一个显示/隐藏事件。在第一个 HTTP 请求时显示，当计数达到 0 时隐藏。

我相信这些是与链接帖子的主要区别，不确定它们是否与我的问题相关，但以防万一他们......

加载器隐藏事件处理后，加载器消失了，除非刷新页面，否则我不会再次显示它，但我仍然有后台http请求刷新当前页面上的数据。这些请求仍将被拦截并触发不再需要/处理的新显示/隐藏事件。我只需要第一次表演和第一次隐藏，就是这样。

$httpProvider在触发第一个隐藏事件后，删除我添加到的 HTTP 拦截器的正确方法是什么？

我知道我们使用 a 添加拦截器，$httpProvider.interceptors.push()但是当我不再需要该拦截器时，我不确定如何将其弹出。

我使用有角度的 $http 拦截器来检查 ajax 请求是否返回 401（未经过身份验证）。如果响应为 401，则原始请求排队，显示登录表单，登录成功后，它会重试排队的请求。这已经适用于 $http，角度拦截器的来源是：

如何使用这个有角度的 $http 拦截器发出微风请求？

Breeze 在“Breeze/Adapters/breeze.ajax.angular.js”文件中为 angular $http 服务提供了一个包装器。所以第一个想法是告诉微风使用它：

调试angular.js，显示现在brief实际上使用了$http，但是并没有执行上面注册的拦截器。在 $http 中，有一个数组“reversedInterceptors”，它保存了注册的拦截器。我将此数组记录到控制台。如果我使用 $http，这个数组的长度是 1（如预期的那样），但是当用微风发出请求时，这个数组是空的。

问题是，我如何在微风请求中使用这个 $http 拦截器？

这是breeze.ajax.angular.js 的代码，由微风提供

I am using http interceptor directive to load the spinner and here is my script code:

and in HTML i am calling the div like this with the required CSS

What I want to make this spinner smart. I don't want to display the spinner on every small http call. So if my request if really small and it takes some milliseconds, I don't want to display the spinner. I want to add a delay time to the spinner.. let say 2 second. So if the request it taking more than 2 second this spinner should show up otherwise I don't want to display it. Can someone help me to find the solution for this? I have tried https://github.com/ajoslin/angular-promise-tracker but seems like doesn't work for me.

Can someone help me to make it smarter please?

我正在努力做到这一点，以便我可以将“requestCounter”添加到任何控制器并获得一个随着请求数量不断更新的值。拦截器代码正在工作，但是注入 requestCounter 提供的值始终是{count: 0}. 我不明白什么！

控制器

标记

200 ok有时，即使出现错误，我使用的 API 也会返回。响应 JSON 对象将类似于：

我已经构建了一个 $httpresponse拦截器，它只是检查这个错误并拒绝它。我希望它然后跳入我的responseError功能：

问题是，即使在拒绝响应之后，我的responseError函数也没有被调用。它被称为500错误等，所以我知道它正在工作。我希望拒绝也会做同样的事情。

从文档：

关于缺少什么的任何想法？

我正在尝试配置$httpAngular 的服务，以在状态码为 403 时重定向到 URL。

到目前为止没有问题，但是要重定向到的 URL 来自服务器，通过正在使用的服务$http（显然）。

这是一段代码：

此代码在 Angular 中创建循环依赖项（错误）。

有没有一种方法可以做到这一点，具有来自服务器的动态 URL，并基于此在response.status403 时将用户重定向到其中一个？

我有一个使用 $httpProvider 作为 follwos 的拦截器（取自 Angular 文档）

使用调试器，我看到每个响应都会调用此方法，当我查看传递的“响应”对象时，我只看到一个标头，即 Accept-Header，如下所示

当我查看 chrome 中的响应数据包时，我看到了更多标头

我的问题是为什么我看不到响应中的所有标题？

具体来说，我想读取 AntiforgeryToken 的 cookie 并存储它，我该怎么做？