AngularJS 中的身份验证和授权答案

【问题标题】：Authentication & Authorization in AngularJSAngularJS 中的身份验证和授权
【发布时间】：2016-04-09 21:55:56
【问题描述】：

我是一名 ASP.NET MVC 开发人员，最近开始学习 AngularJS，因为它似乎是一种更现代的技术。

但是，当谈到 AngularJS 中的身份验证和授权时，我想到了一些复杂的问题。特别是 AngularJS 以 ASP.NET Web API 作为后端。

身份验证并从 api 获取令牌后，我会想象使用 Angularjs 将令牌存储在 cookie 中。因此，任何进一步的请求都将包含令牌。说由于某种原因，令牌过期，对 api 的下一个 angularjs 请求将因未经授权而失败。但是，在客户端，Angular 认为它已经过身份验证（cookie），并将继续在所有请求中使用该无效令牌。我可以想到一个解决方案，即检查每个请求的“未经授权”响应，如果是这种情况，则重定向到登录。但我可能会因为这种做法而被枪杀。
在 ASP.NET MVC 中，保护某个页面/资源就像添加 [Authorize] 一样简单。但是在角度上，它似乎非常复杂。我如何保护许多页面免受未经身份验证的影响？我是否必须为每条路线等设置和拦截器？
授权也是如此，如果经过身份验证的用户尝试访问管理面板或管理面板的某些部分，该怎么办。如果他们通过直接 URL 访问，我如何重定向到未经授权的页面。

【问题讨论】：

标签： asp.net angularjs authentication asp.net-web-api authorization

【解决方案1】：

有很多方法可以解决您的困境，但让我给您一些我通常用来进行身份验证和授权的技巧。

您的应用必须通过 API 进行身份验证（无论是 .NET 还是其他方式），这可能通过设置 cookie 的登录请求（在服务器重定向期间）或返回令牌的登录端点（例如使用o 身份验证）。无论哪种方式，您都必须存储授权令牌，以便 Angular 可以访问它。我自己使用 cookie 或 localStorage。然后，当用户通过身份验证时，我有一个用户服务商店，因此我可以在应用程序的任何地方使用它。

一旦发生这种情况，您可以使用request http interceptors 将授权标头附加到您的请求中。您还可以使用响应错误拦截器来捕获令牌不再被接受的时间（通常是 401 状态代码，易于检查），并再次强制登录。这应该解决您提出的问题 #1。

那么对于 issue #2 和 #3，如果你使用的是 uiRouter，你可以监听state change events（尤其是$stateChangeStart）。如果我有一个管理页面，我将其命名为admin.whatever，然后有一个更改事件来检查状态是否有管理员，并重定向非管理员的用户。同样，我可以对所有状态执行相同的操作，以检测当前是否没有登录用户并强制登录重定向。

希望能给你一些想法，听起来你是在正确的轨道上，但需要挂钩到 Angular 功能。

【讨论】：

如果您有或知道其中的任何示例，我很想看看它是如何实现的。
jvandemo.com/…

【解决方案2】：

这不是一个真正的答案，但我和你在同一条船上。我已经构建了一些基本的 Angular 页面和小型 SPA 应用程序，但现在我正在尝试使用 .Net Identity 将它们全部绑定到 MVC 应用程序中。令人惊讶的是，关于这个话题的内容并不多。我确实遇到了一个很好的例子，但是我还没有准备好使用 .Net Core 和 MVC 6。值得一看，可能会给你一些想法。

http://stephenwalther.com/archive/2015/01/29/asp-net-5-and-angularjs-part-6-security

几天前，我看到了这个视频，在很大程度上它似乎解决了这个问题。这是迄今为止我发现的唯一一个使用 MVC 5、Angular 和一些 .Net 授权的东西。看看它是否给你任何想法。我还没有机会实现它，但我希望在接下来的几天内开始这样做。如果您学习或发现任何内容，请在此处发布。

https://www.youtube.com/watch?v=f67PFtrldGQ&nohtml5=False

【讨论】：