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

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

我的计划如下：

获取用户信息（登录表单中的姓名和密码）

检查用户是否存在

如果存在，服务器将使用会话cookie进行响应，前端将重定向到某个页面

然后用户将执行一些任务来生成API请求

API请求应该包含在步骤3中发送的cookie信息

服务器检查是否生成了cookie，如果找到了cookie，则使用API请求结果进行响应。在我的服务中，我做了一些

MyApp.service（'myAuth'，函数（$http，$q）{ this.authHeader=null； this.checkAuth=函数（）{ //执行api调用，如果成功，则设置this.authHeader=response } this.isAuthenticaed=函数（）{ this.authHeader？返回this.authHeader:返回false； } 提交登录表单后，我将调用checkAuth并从我的服务器获取会话cookie，如何在执行下一次REST调用时添加cookie信息，以及用户登录后在整个应用程序中导航时，我确实希望在Angularjs中检查每一次IsAuthenticateAd true或false，何时导航到另一个应用程序页面在第一次调用时将其设置为真后是否会重置？我的方法1-6是否良好，或者您是否有任何具体建议？

---

顺便说一句，我检查了以前的so条目，但这些不是我想知道的。

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

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

这将保存在Angular中管理客户端身份验证所需的所有代码。如果用户登录到此页面，则他将获得身份验证并拥有cookie

---

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

我使用http auth拦截器

在我的后端（asp.net mvc）中，我构建了一个简单的身份验证服务，如果用户未经身份验证，我将返回一个http错误

401

。 然后，我通过SPA站点中的登录视图处理错误。

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

您可以为此使用第三方服务，以及

请查看，或以。以下是一些有关其工作原理的示例：

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

  <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>
  

  <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>
  

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

  ua是电子邮件

  表示用户名与电子邮件相同

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

  <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>
  

  <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>
  

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

  .others（）

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

  $routeProvider。否则（{重定向到：'/home'}）；

• 注销链接：

  <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>
  

  <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>
  

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

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

  <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>
  

  <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>
  

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

  欢迎{{user.first_name}}！

要对后端服务进行身份验证，只需使用

user.token（）

获取会话令牌并将其与AJAX请求一起发送。在后端，使用检查令牌是否有效

---

如果您需要任何帮助，请告诉我：）

前面的答案提出的想法会起作用，但我认为它们太过分了。您不需要这么复杂的东西

如何在执行下一个REST调用时添加cookie信息

默认情况下，在

$httpProvider

内启用带有凭据的

，如下所示：

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

然后从CORS相关的头中删除通配符（如果有通配符的话），并在服务器端设置允许凭据

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

现在浏览器将自动透明地设置和返回cookies。有关更多信息，请参阅以下线程：





当用户登录后在整个应用程序中导航时，我确实希望每次都检查IsAuthenticateAD true或false

如上所述，如果身份验证会话过期或被删除，请让服务器返回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);
});

检查此问题以检查用户是否经过身份验证…您的服务器端需要返回和401请求并重定向到登录页面。要检查此问题，您不能在$http上放置侦听器来侦听此http 401响应。我正在使用侦听器在身份验证后添加cookie以调用REST请求，有一点我不清楚ar.注销应该如何工作。我正在保存会话数据（cookie）当用户发送任何新请求时，我会检查保存的cookie。当用户发送注销请求时，我是否需要删除cookie？我在服务器端使用ASP.NET MVC，带有修改的表单身份验证。在注销时，我的客户端向服务器发送注销请求，服务器删除身份验证cookie。此模块是最佳选项n原始的博文解释了在单页应用程序中使用/login或/logout路由是如何不再有意义的（尽管它在后端有意义）。刚刚开始使用http auth拦截器，我看到了它做什么/不做什么，所以这个答案