Избегайте прямого доступа к URL в AngularJS

У меня есть веб-приложение, которое использует ui-router для маршрутизации. Существует модуль управления пользователями, где определенные роли предоставляются пользователю (роль x, y и z). Когда пользователь с ролью x регистрируется в нем, он будет ограничен определенными состояниями ui-router, например. 'панель приборов'.Избегайте прямого доступа к URL в AngularJS

Когда пользователь входит в систему, я сохранил роль пользователя в переменной cookie (используя $cookie). Я также использовал ng-hide, чтобы скрыть Панель навигации боковую панель, когда пользователь с ролью х авторизован так:

HTML:

<li ui-sref-active="active"> 
    <a ui-sref="dashboard" ng-hide="roleIsX()"> 
     <i class="fa fa-laptop"></i> <span class="nav-label">Dashboard</span> 
    </a> 
</li>

Контроллер:

$scope.roleIsX = function() { 

    if ($cookies.get('loggedInUserRole') === "x") 
    return true; 
    else 
    return false; 

}

Это работает нормально на данный момент, но проблема в том, что когда пользователь регистрируется, он может напрямую перейти к URL-адресу, записав его в адресной строке. Есть ли простой способ решить эту проблему с учетом моей ситуации?

источник

2015-09-17 Sibtain

Вы не можете остановить браузер от просмотра, единственное, что я мог думать о том, а) все делается на одной странице, так что нет никаких других адресов или b) вы сохраняете в файле cookie последнюю страницу, на которой был пользователь, и на каждой странице, которую вы проверяете, чтобы убедиться, что они пришли с правой страницы или перенаправили их на главную страницу. – IfTrue

Если пользователь с ограниченным доступом к URL-адресу входит в него, тогда ему должна быть показана страница с недопустимым именем и т. Д. Как я могу сделать это в Angular? – Sibtain

В контроллере для этой страницы вы можете проверить, вошли ли они в систему и проверить, однако вы назначаете им доступ, а затем перенаправляете, если их там не должно быть. – IfTrue

В конце концов я использовал resolve из ui-router как предложено @Shivi. Ниже приведен код, если кто-то еще смотрит вверх:

app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', 
     function($urlRouterProvider, $stateProvider, $locationProvider){ 
     ... 

     .state('user-management', { 
      ... 
      ... 
      resolve: { 
      roleAuthenticate: function($q, UserService, $state, $timeout) { 
       if (UserService.roleIsX()) { 
       // Resolve the promise successfully 
       return $q.when() 
       } else { 

       $timeout(function() { 
        // This code runs after the authentication promise has been rejected. 
        // Go to the dashboard page 
        $state.go('dashboard') 
       }) 
       // Reject the authentication promise to prevent the state from loading 
       return $q.reject() 
       } 
      } 


      } 
     })

Этот код проверяет, то roleIsX продолжать государства еще открытым dashboard государства.

Полезные ссылки: angular ui-router login authentication - Ответа на этот вопрос @MK Сафи

источник

2015-09-18 06:48:38 Sibtain

слушать $locationChangeStart событие, и предотвратить его, если необходимо:

$scope.$on("$locationChangeStart", function(event, next, current) { 
    if (!$scope.roleIsX()) { 
     event.preventDefault(); 
    } 
});

источник

2015-09-17 12:22:56 MoLow

Где должен быть этот код? app.run()? или какой из контроллеров? – Sibtain

его, вероятно, лучше всего в блоке run, но тогда вам нужно переместить туда функцию roleIsX. – MoLow

Я использовал решение, но спасибо в любом случае – Sibtain

Избегайте прямого доступа к URL в AngularJS

ответ

Смежные вопросы