AngularJS (Restangular): Tạo một khối lời hứa? Cần sử dụng nó để xác thực mã thông báo

Question

Tôi đã tình cờ gặp Restangular để thực hiện cuộc gọi đến dịch vụ nghỉ ngơi. Nó hoạt động rất tốt và trả về một lời hứa. Tôi cần có khả năng chặn cuộc gọi. Lý do cho điều này là trên một trang tươi tải lại tôi về mặt kỹ thuật không đăng nhập nhưng tôi có thể có một mã thông báo được lưu trữ trong một cookie. tôi muốn xác thực mã thông báo này đối với dịch vụ còn lại. Vấn đề là tôi cần nó để chặn.

Nếu hết thời gian chờ hoặc nếu không hợp lệ, tôi có thể coi người dùng đó là không được xác thực.

Đây là lý do muốn chặn là tôi muốn chuyển hướng chúng bằng cách sử dụng $ location.path đến URL mới không phải là mã thông báo hợp lệ.

Điều này không xảy ra trên một tuyến đường cụ thể để tôi không thể sử dụng giải pháp đang chặn. Nó kỹ thuật xảy ra trên mọi tuyến đường - tôi sử dụng $ trên. $ RouteChangeStart và kiểm tra một biến nội bộ có LoggedIn hay không, nếu không đăng nhập tôi kiểm tra mã thông báo đã lưu.

Điều này xảy ra trên mỗi lần làm mới trang nhưng không phải trong khi điều hướng bên trong ứng dụng.

Ảnh hưởng mà tôi đang cố gắng tìm hiểu là Gmail hoạt động như thế nào.

Nhìn về phía trước để bất kỳ ai có cái nhìn sâu sắc về vấn đề này

Cảm ơn

Answer 1

Về cơ bản, bạn cần đảm bảo rằng một số hành động không đồng bộ xảy ra trước khi xảy ra bất kỳ thay đổi tuyến đường nào và trong trường hợp này, hành động đang xác thực người dùng.

Những gì bạn có thể làm là sử dụng sự kiện $routeChangeStart đó là phát ra để thêm một tài sản cho đối tượng resolve trên tuyến như sau:

function authenticate() { 
    if (user.isAuthenticated) { 
     return; 
    } 
    // Just fake it, but in a real app this might be an ajax call or something 
    return $timeout(function() { 
     user.isAuthenticated = true; 
    }, 3000); 
} 

$rootScope.$on("$routeChangeStart", function(e, next) { 
    console.log("$routeChangeStart"); 
    next.resolve = angular.extend(next.resolve || {}, { 
     __authenticating__: authenticate 
    }); 
}); 

Từ góc sẽ đợi cho bất kỳ lời hứa trong đối tượng resolve để được hoàn thành trước khi tiếp tục, bạn chỉ có thể sử dụng một sự phụ thuộc giả như trong ví dụ. Sử dụng một cái gì đó như thế, bạn sẽ có thể đảm bảo rằng người dùng của bạn là xác thực trước khi bất kỳ tuyến đường thực hiện thành công.

Ví dụ: http://jsfiddle.net/hLddM/

Answer 2

Tôi nghĩ rằng cách tốt nhất để làm điều này có thể đẩy người dùng xung quanh với $ location.path, Bạn có thể sử dụng .Sau đó() có hiệu lực để chờ đợi bằng cách để người dùng trên trang tải.

var currentPath = $location.path(); 

$location.path(loadingScreen); 

//Assuming you have some sort of login function for ease. 
Restangular.login(token).then(
    function(result) { 
     $location.path(currentPath) 
    }, 
    function(error) { 
     $location.path(logInScreen) 
    } 
); 

Answer 3

Nếu bạn đang sử dụng ui-router, bạn có thể chuyển sang trạng thái khác với cùng một URL, nơi bạn muốn sử dụng Restangular.login với đó, và trong trường hợp thành công trở lại " đăng nhập "nhà nước, nếu không, đi đến" đăng nhập "nhà nước nơi người dùng phải nhập tên người dùng và mật khẩu của mình.

Nếu bạn không sử dụng ui-router, bạn có thể triển khai một cái gì đó tương tự với một số ng-switch.

Vì vậy, khi đến màn hình, bạn làm điều đó Restangular.login và theo mặc định bạn hiển thị trang tải bằng cách đặt một số boolean thành true. Sau đó, nếu nó không succedd, bạn gửi cho anh ta để đăng nhập, nếu không, bạn đặt tải đến sai và hiển thị trang.

Dù sao, tôi đặc biệt khuyên bạn nên sử dụng ui-router, nó đá :)

Hy vọng công trình này!