Ngăn chặn truy cập vào các trang quản trị trong AngularJS

Question

Tôi tự hỏi cách tiếp cận tốt nhất trong AngularJS là bảo mật các trang quản trị, tức là các trang mà người dùng bình thường không thể xem được. Rõ ràng, sẽ có xác thực back-end nhưng kể từ khi ứng dụng AngularJS là phía máy khách, mọi người vẫn có thể xem xét định tuyến về mặt lý thuyết và truy cập trực tiếp vào các URL đó và xem các trang quản trị.

Tôi đang sử dụng Express, PassportJS & MongoDB (Mongoose) làm chương trình phụ trợ của tôi. Đương nhiên, họ sẽ không thể tương tác với các trang quản trị vì có xác thực phía máy chủ về việc tạo, xóa, ... nhưng tôi muốn không phân phát các trang cho người dùng nếu họ không có truy cập thích hợp. Kể từ khi ứng dụng hoàn toàn phía khách hàng JS mặc dù, tôi nghĩ rằng đây là loại không thể kể từ khi mọi người chỉ có thể sửa đổi định tuyến và whatnot. Cách tốt nhất để giải quyết vấn đề này là gì? Cảm ơn mọi đầu vào!

Answer 1

Tại sao bạn "thích" không phân phát các trang này cho người dùng không phải quản trị viên? Bạn có một lý do thực sự để quan tâm đến điều này, không phải là bản năng nào đó mà bạn nên ngăn mọi người nhìn thấy những thứ họ không phải là "đáng lẽ" để xem?

Nếu bảo mật của bạn được định cấu hình đúng cách thì người dùng không phải quản trị viên sẽ không thể truy cập dữ liệu quản trị hoặc thực hiện các hoạt động của quản trị viên. Đó là những gì bạn nên tập trung vào, không phát minh ra những cách phức tạp để ngăn chặn họ nhìn thấy màn hình quản trị mà họ không thể sử dụng anyway. Bất cứ lúc nào bạn dành thời gian này về cơ bản là lãng phí thời gian, và bạn nên dành nó vào những thứ quan trọng hơn.

Answer 2

Tôi sẽ đặt séc bên trong routeProvider. Điều này phải được thực hiện cho mọi tuyến đường yêu cầu xác thực. Bạn thậm chí có thể viết một phương pháp riêng biệt và dán nó vào mỗi tuyến đường để tránh trùng lặp.

$routeProvider 
.when('/profile', { 
    templateUrl: 'views/profile.html', 
    controller: 'ProfileCtrl', 
    resolve: { 
    validate: function($q, $location) { 
     // Either you could maintain an array of hashes on client side 
     // a user do not have access to without login 
     // Or hit the backend url to check it more securely 
     var validateAccess = $q.defer(); 
     var isAllowed = ['profile', 'index', 'dashboard'].indexOf($location.hash()) !== -1; 

     if (!isAllowed) { 
     $location.path('/login'); 
     } 

     validateAccess.resolve(); 
     return validateAccess.promise; 
    } 
    } 
}) 
.otherwise({ 
    redirectTo: '/' 
}); 

Answer 3

Câu hỏi này là một chút cũ nhưng nếu có ai đang tìm kiếm giải pháp trên mạng, tôi đã sử dụng một tập tin tài nguyên để lưu trữ các mẫu html của tôi và sau đó lấy nó với WebAPI khi xác nhận sự cho phép và trả lại html chỉ khi người dùng đã được xác thực.

Answer 4

Tôi đồng ý với những lo ngại của Chris Russo. Đây là tất cả về vấn đề bảo mật. Nếu bạn đang sử dụng góc cạnh cho front-end của mình thì bạn cần một framework có khả năng mạnh mẽ trong việc bảo vệ ứng dụng của bạn nếu ai đó đang cố tấn công trang web/ứng dụng của bạn. Tôi sẽ giới thiệu Spring framework (spring_security) nó đã chứng minh tính năng bảo vệ ứng dụng web của bạn. Bạn cần gán vai trò cho từng người dùng như ROLE_USER hoặc ROLE_ADMIN. Tôi sẽ không đi sâu vào chi tiết làm thế nào để làm điều đó nhưng điều này sẽ giúp giải quyết mối quan tâm của bạn. :)

Answer 5

Cách tôi làm là, đặt angularJS html trong trang JSP và kiểm tra phiên. Nếu phiên xác thực cung cấp quyền truy cập. Tôi không chắc chắn nếu đó là cách đúng đắn. Một cách khác là, không sử dụng JSP, nhưng với mỗi lần truy cập API, hãy kiểm tra phiên tại máy chủ, ngược lại sẽ trả về false. Một cách khác là đăng nhập lần đầu, nhận khóa tự động, lưu trữ tại máy chủ và ứng dụng cả hai, kiểm tra từng lần truy cập API.

Answer 6

Bạn có thể sử dụng params trong ui-routerhttps://github.com/angular-ui/ui-router/tree/master