2016-12-12 9 views
0

Требование приложения состоит в том, чтобы показывать разные параметры в зависимости от роли пользователя. КакangularJS несколько основных страниц на основе роли

  1. Если роль администратора, то после входа в систему, пользователь должен быть показан мастер-страницу, которая имеет ссылку на вариант 1, вариант 2 и Вариант 3.

  2. Если роль оператора , после входа в систему, пользователь должен быть показан мастер-страницу, которая имеет связь для варианта 4 и вариант 5.

Любая идея, как достичь этого?. Я использую аутентификацию на основе токенов. Я использую ng-view. Вот мои настройки конфигурации.

angularSupplierCTQApp.config(function ($routeProvider, $locationProvider) { 
    $routeProvider 
     .when("/home", { 
      templateUrl: "App/Home/Home.html", 
      controller: "HomeController" 
     }) 
     .when("/login", { 
      templateUrl: "App/Login/loginTemplate.html", 
      controller: "LoginController" 
     }) 
     .otherwise({ 
      redirectTo: "/login" 
     }); 


}); 
+0

При успешном входе в систему, где вы должны были бы сделать маршрутизацию http://stackoverflow.com/questions/23429055/angularjs-ui-router -load-template-and-controller-based-on-user-role? rq = 1 – Ronnie

ответ

1

Вы можете сделать функцию '/ homeAdmin' и '/ homeOp' в индекс Ctrl

$scope.IsAdmin = function(){ 
return $scope.authentication.role ==  "admin"; 
} 

И на каждом Div вы можете проверить с нг-если

<div ng-if="isAdmin()">test div<\div> 

В этом случае ng-if лучше, чем ng-hide/show, потому что ng-если полностью удалить из DOM. И, если вы используете ng-hide/show ..., кто-то может очень легко изменить код в консоли и получить данные.

EDIT:

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

app.factory('authService', ['$http', '$sessionStorage', '$q', 'localStorageService', 'ngAuthSettings', 
function ($http, $localStorage, $q, localStorageService, ngAuthSettings, $resource, $rootScope, $location) { 

    var serviceBase = ngAuthSettings.apiServiceBaseUri; 
    var authServiceFactory = {}; 

    var _authentication = { 
     isAuth: false, 
     username: "", 
     role: "", 
     userID: "" 
       //useRefreshTokens: false 
    }; 
function urlBase64Decode(str) { 
     var output = str.replace('-', '+').replace('_', '/'); 
     switch (output.length % 4) { 
      case 0: 
       break; 
      case 2: 
       output += '=='; 
       break; 
      case 3: 
       output += '='; 
       break; 
      default: 
       throw 'Illegal base64url string!'; 
     } 
     return window.atob(output); 
    } 

    function getUserRoleFromToken(t) { 

     var user = getUserFromToken(t); 
     return user.role; 
    } 
}]); 

Теперь, после входа в систему вы можете проверить, что пользователь вошел в систему, которые пользователь имеет определенную роль. Затем выполните проверку, если ADMIN, и вы позволите ему увидеть части, которые может видеть только администратор.

Я пишу в спешке, поэтому, пожалуйста, обратите внимание на скобки

+0

Я добавил код

test div
в Index.html, который связан с контроллером IndexController. В стороне IndexController я добавил код только для тестирования $ scope.isAdmin = function() { $ log.debug ('IsAdmin called'); return true; } Но функция IsAdmin так и не вызывается. Любая идея почему? – bp581

+0

Артер, не могли бы вы помочь мне с моим вопросом. Функция isAdmin не вызвана. Я своего рода новичок в angularjs. – bp581

+0

Любая ошибка в консоли? – Arter

0

Существует два способа вы могли бы сделать это:

  1. Скрытые элементы: Скрыть элементы, которые не имеют отношения с помощью нг-if.The ссылки будет выглядеть нг-если = "isRole ('Admin') "на опциях 1,2 и 3. Затем ng-if =" isRole ('Operator') "на опциях 4 и 5.

  2. Различные маршруты: иметь отдельные маршруты для администратора и оператора. поэтому у вас есть