如何在Angular JS應用程序中處理身份驗證

Question

我在我的angular js應用程序中實現了身份驗證系統。

什麼，我打算像下面：

1. 獲取用戶信息（名稱，並從登錄表單傳遞）
2. 檢查用戶是否存在
3. 如果存在服務器響應與會話cookie和前端將重定向到某個頁面。
4. 然後用戶會做一些任務，這將產生API請求
5. API請求應該有一個是上步送出3
6. 服務器檢查Cookie是否發生與否，如果餅乾被發現然後用響應的cookie信息API請求結果。而在我的服務，我做一些像

 
    MyApp.service('myAuth', function($http, $q) { 
     this.authHeader = null; 
     this.checkAuth = function(){ 
     //do api call and if success sets this.authHeader = response 
     } 
     this.isAuthenticaed = function(){ 
      this.authHeader ? return this.authHeder : return false; 
     } 

提交登錄表單我會打電話給checkAuth並從我的服務器，同時做下一個REST調用我如何添加cookie信息讓我的會話cookie回來後還有當用戶在登錄後瀏覽整個應用程序時，我確實想要檢查每次isAuthenticaed是true還是false，在Angularjs中，當它導航到另一個頁面時，它會在從第一次調用設置爲true時重置它嗎？我的方法1-6是否好，或者你有什麼具體的建議？ 順便說一句我檢查了以前所以條目，但這些都不是我想知道的。

Answer 1

我不知道你的後端，但是這是我會怎麼做

• 創建一個單獨的登錄頁面（網址專用角不副視點或 模式對話框）。
• 如果用戶未通過身份驗證重定向到此登錄 頁面。這由服務器重定向完成。此頁面可能使用或不使用 角度框架，因爲它只涉及將用戶\密碼發送到 服務器。
• 從登錄頁面發出POST（而不是AJAX請求），並在服務器上進行驗證。
• 在服務器上設置auth cookie。 （不同的框架不同，ASP.Net設置表單身份驗證Cookie）
• 用戶通過身份驗證後，將用戶重定向到實際的角度應用程序並加載其所有組件。

這節省了在Angular客戶端管理身份驗證所需的任何代碼。如果用戶登錄此頁面，他將通過身份驗證並擁有Cookie。

此外，默認的瀏覽器行爲是發送與每個請求相關聯的域的所有cookie，因此您不必擔心角度是否發送一些cookie。

Answer 2

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

在我的後端（asp.net mvc）中，我構建了一個簡單的身份驗證服務，並在用戶未通過身份驗證時返回http錯誤401。 然後我通過SPA網站中的登錄視圖處理錯誤。

Answer 3

（披露：我的UserApp的開發者之一）

你可以使用第三方服務UserApp這一點，與AngularJS module在一起。

檢查出getting started guide，或採取course on Codecademy。下面是它如何工作的一些例子：

• 登錄形式的錯誤處理：user.current.email

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

  <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服務訪問

• 註冊表格錯誤處理：

  <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'});

• 註銷鏈接：

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

0：只應可見登錄時

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

• 隱藏元件

爲了驗證您的後端服務，只需使用user.token()獲取會話令牌並通過AJAX請求發送它。在後端，使用UserApp API來檢查令牌是否有效。

如果您需要任何幫助，只是讓我知道:)

Answer 4

由以前的答案提出將工作的想法，但我認爲他們是矯枉過正。你不需要任何複雜的東西。

在做下一個REST調用

打開withCredentials默認內$httpProvider像這樣我就可以怎麼加的cookie信息：

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

然後刪除通配符（如果你有一個）從CORS相關頭文件，並在服務器端設置allow-credentials。在我的情況下，使用Python +瓶+ 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)] 

現在cookies將被設置，並通過瀏覽器自動，透明地返回。見這些線程的詳細信息：

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

當用戶將整個日誌後應用導航中我要檢查每一次isAuthenticaed真或假

如上所述，如果auth會話過期或被刪除，請讓服務器返回401，並使用$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); 
});