如何在 Angular JS 应用程序中处理身份验证

Question

我正在我的 Angular js 应用程序中实现一个身份验证系统。

我的计划如下：

1. 获取用户信息（登录表单中的姓名和密码）
2. 检查用户是否存在
3. 如果存在服务器响应会话 cookie，前端将重定向到某个页面。
4. 然后用户将执行一些将生成 API 请求的任务
5. API 请求应包含在步骤 3 中发送的 cookie 信息
6. 服务器检查 cookie 是否生成，如果找到 cookie，则返回 API 请求结果。在我的服务中，我正在做类似的事情

MyApp.service('myAuth', function($http, $q) { this.authHeader = null; this.checkAuth = 函数（）{ //做api调用，如果成功设置this.authHeader = response } this.isAuthenticaed = function(){ 这个.authHeader ？返回 this.authHeder ：返回 false； }

提交登录表单后，我将调用 checkAuth 并从我的服务器取回我的会话 cookie，我如何在进行下一次 REST 调用时添加 cookie 信息，以及当用户在登录后浏览整个应用程序时我确实想要每次检查isAuthenticaed真或假，在Angularjs中，当它导航到另一个页面时，它是否在第一次调用设置为真后重置？我的方法 1-6 好还是你有什么具体建议？ 顺便说一句，我检查了以前的条目，但这些不是我想知道的。

Answer 1

我不确定你的后端，但我会这样做

• 创建一个单独的登录页面（专用 url 不是角度子视图或 模态对话框）。
• 如果用户未通过身份验证重定向到此登录 页。这是通过服务器重定向完成的。此页面可能会或可能不会使用 角度框架，因为它只涉及发送用户\密码到 服务器。
• 从登录页面发出 POST（不是 AJAX 请求），并在服务器上进行验证。
• 在服务器上设置身份验证 cookie。 （不同框架的做法不同。ASP.Net 设置表单身份验证 cookie。）
• 用户通过身份验证后，将用户重定向到实际的 Angular 应用并加载其所有组件。

这节省了在 Angular 中管理客户端身份验证所需的任何代码。如果用户登陆此页面，则他已通过身份验证并拥有 cookie。

此外，默认浏览器行为是在每次请求时发送与域关联的所有 cookie，因此您不必担心 Angular 是否发送了一些 cookie。

Answer 2

我使用 http-auth-interceptor。 http://ngmodules.org/modules/http-auth-interceptor

在我的后端 (asp.net mvc) 中，我构建了一个简单的身份验证服务，如果用户未通过身份验证，则返回一个 http 错误 401。 然后我在 SPA 站点中使用登录视图处理错误。

Answer 3

前面的答案提出的想法会奏效，但我认为它们有点矫枉过正。你不需要这么复杂的东西。

如何在进行下一次 REST 调用时添加 cookie 信息

在$httpProvider中默认打开withCredentials，如下所示：

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.withCredentials = true;
}]);

然后从与 CORS 相关的标头中删除通配符（如果有的话），并在服务器端设置允许凭据。就我而言，使用 Python + Flask + Flask-Restful，非常简单，看起来像这样：

import Flask
from flask_restful import Api
app = Flask(__name__)
api = Api(app)
api.decorators = [cors.crossdomain(origin='http://localhost:8100', credentials=True)]

现在 cookie 将由浏览器自动且透明地设置和返回。有关详细信息，请参阅这些主题：

• $http response Set-Cookie not accessible
• Angularjs $http does not seem to understand "Set-Cookie" in the response

当用户在登录后浏览整个应用程序时，我确实想检查每次 isAuthenticaed 是真是假

如上所述，如果身份验证会话过期或被删除，则让服务器返回 401，并在 Angular 中使用 $httpInterceptor 像这样捕获：

app.config(function($httpProvider) {
    var interceptor =
        function($q, $rootScope) {
            return {
                'response': function(response) {
                    return response;
                 },
                'responseError': function(rejection) {
                    if (rejection.status==401) {
                        // Modify this part to suit your needs.
                        // In my case I broadcast a message which is
                        // picked up elsewhere to show the login screen.
                        if (!rejection.config.url.endsWith('/login'))
                        {
                            $rootScope.$broadcast('auth:loginRequired');
                        }
                    }

                    return $q.reject(rejection)
                 }
            }
        };

    $httpProvider.interceptors.push(interceptor);
});

Answer 4

（披露：我是 UserApp 的开发者之一）

您可以为此使用第三方服务UserApp，以及AngularJS module。

查看getting started guide，或拨打course on Codecademy。以下是其工作原理的一些示例：

• 带有错误处理的登录表单：

  <form ua-login ua-error="error-msg">
      <input name="login" placeholder="Username"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Log in</button>
      <p id="error-msg"></p>
  </form>
  

  使用user服务访问用户信息：user.current.email

  或者在模板中：<span>{{ user.email }}</span>

• 带有错误处理的注册表单：

  <form ua-signup ua-error="error-msg">
      <input name="first_name" placeholder="Your name"><br>
      <input name="login" ua-is-email placeholder="Email"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Create account</button>
      <p id="error-msg"></p>
  </form>
  

  ua-is-email表示用户名与邮箱相同。

• 如何指定哪些路由应该是公开的，哪些路由是登录表单：

  $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
  $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
  

  .otherwise() 路由应设置为您希望用户在登录后重定向到的位置。示例：

  $routeProvider.otherwise({redirectTo: '/home'});

• 退出链接：

  <a href="#" ua-logout>Log Out</a>

• 隐藏仅在登录时才可见的元素：

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

要对您的后端服务进行身份验证，只需使用user.token() 获取会话令牌并将其与 AJAX 请求一起发送。在后端，使用UserApp API 来检查令牌是否有效。

如果您需要任何帮助，请告诉我 :)