17

Tôi khá mới với Angular, và ngay bây giờ tôi chỉ cố gắng để có được tất cả các tuyến đường của tôi thiết lập và làm việc như tôi muốn.Chuyển hướng sau khi người dùng đã đăng nhập

Setup:. Khi người dùng điều hướng đến các trang nhất định (/settings ví dụ này) ứng dụng nên kiểm tra nếu có một người dùng đã đăng nhập Nếu có tiếp tục như bình thường. Nếu không, người dùng nên truy cập trang đăng nhập (/login).

Những gì tôi muốn: Sau khi người dùng đã đăng nhập thành công họ phải đi đến trang họ ban đầu cố gắng để có được (/settings)

Câu hỏi của tôi: Có một " Cách góc cạnh "để nhớ nơi người dùng đang cố gắng đến?

đang liên quan:

app.js

.when('/settings', { 
     templateUrl: '/views/auth/settings.html', 
     controller: 'SettingsCtrl', 
     resolve: { 
     currentUser: function($q, $location, Auth) { 
      var deferred = $q.defer(); 

      var noUser = function() { 
      //remember where the user was trying to go 
      $location.path("/login") 
      }; 

      Auth.checkLogin(function() { 
      if (Auth.currentUser()) { 
       deferred.resolve(Auth.currentUser()); 
      } else { 
       deferred.reject(noUser()); 
      } 
      }); 

      return deferred.promise; 
     } 
     } 
    }) 

login.js

$scope.submit = function() { 
    if(!$scope.logInForm.$invalid) { 
     Auth.login($scope.login, $scope.password, $scope.remember_me) 
     //go to the page the user was trying to get to 
    } 
    }; 

Phần lớn nhờ John Lindquist cho the video đó đã cho tôi điều này đến nay.

+1

Bạn có thể lưu trữ thông tin này trên $ rootScope hoặc trong [service] (http://docs.angularjs.org/guide/dev_guide.services). –

Trả lời

17

Trước hết, bạn không muốn chuyển hướng người dùng đến trang đăng nhập.

Một dòng chảy lý tưởng trong một ứng dụng trang web duy nhất là như sau:

  1. Người dùng truy cập một trang web. Trang web trả lời bằng nội dung tĩnh cho ứng dụng góc ở tuyến đường cụ thể (ví dụ:/hồ sơ/chỉnh sửa).

  2. Bộ điều khiển (cho tuyến đường nhất định) thực hiện cuộc gọi tới API sử dụng $ http, $ route hoặc cơ chế khác (ví dụ: điền trước biểu mẫu Chỉnh sửa hồ sơ với các chi tiết từ tài khoản người dùng đã đăng nhập qua GET tới/api/v1/người dùng/hồ sơ)

  3. Nếu/trong khi khách hàng nhận được 401 từ API, hãy hiển thị phương thức đăng nhập và phát lại cuộc gọi API.

  4. Cuộc gọi API thành công (trong trường hợp này, người dùng có thể xem Chỉnh sửa hồ sơ hình thức điền sẵn cho tài khoản của họ.)

Làm thế nào bạn có thể làm # 3? Câu trả lời là $ http Máy đánh chặn phản ứng.

Đối với mục đích của xử lý lỗi toàn cầu, chứng thực hay bất kỳ loại tiền xử lý đồng bộ hoặc không đồng bộ của các phản ứng nhận được, đó là mong muốn để có thể ngăn chặn phản ứng cho các yêu cầu http trước họ đang bàn giao cho mã ứng dụng đã bắt đầu các yêu cầu này. máy đánh chặn phản ứng tận dụng apis lời hứa đáp ứng nhu cầu này về cả tiền xử lý đồng bộ và không đồng bộ.

http://docs.angularjs.org/api/ng.$http

Bây giờ chúng ta biết những gì kinh nghiệm người dùng lý tưởng nên được, làm thế nào để chúng tôi làm điều đó?

Có một ví dụ ở đây: http://witoldsz.github.com/angular-http-auth/

Ví dụ được dựa trên bài viết này:

http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

Chúc may mắn và hạnh phúc Angularing!

+2

Tôi không đồng ý với tuyên bố của bạn về "không muốn chuyển hướng". Tôi đang sử dụng http chặn để bắt 401 & hiển thị phương thức đăng nhập.Nó có một vấn đề nghiêm trọng khách hàng của tôi sẽ không chấp nhận - trên trang không thành công có phần hiển thị của ứng dụng - hiển thị ng-view nhưng thành phần rỗng cos của 401 yêu cầu tài nguyên từ API. Nhưng trang (giao diện) được hiển thị cho khách truy cập hoàn toàn không có đặc quyền. – srigi

Các vấn đề liên quan