バックエンドで REST サーバーと連携する SPA に取り組んでいます。
私の目標は、すべての役割に共通するインターフェイスを作成することです。
たとえば、製品ページでは、ゲストは製品とコメントを表示できます。登録ユーザーには、コメントできるテキスト ボックスもあります。管理者は、コメントと製品自体の両方を編集でき、すべてが SPA の同じビュー内で行われます。
したがって、実際には、一部のユーザーに対しては「コンパイル」するべきではなく、他のユーザーに対しては「コンパイル」する必要がある DOM 要素があります。
アプリケーションへのアクセスを制御するために私が行っていることは、ユーザーが特定のページにアクセスするのに十分な特権を持っていることを許可するファクトリを解決することです。このファクトリは rootScope にもアクセスレベルを設定します。
次に、xLimitAccess ディレクティブのコンパイル機能で、現在のユーザーのアクセス レベルがディレクティブ内のコンテンツを表示するのに十分かどうかを確認し、それを削除します。
問題:コンパイル関数から $rootScope にアクセスする方法はありません (まだ存在しないため)。リンク関数でアクセスしようとすると、既に手遅れであり、要素を削除できません。 DOM
HTML コード例:
<div class="product">...</div>
<div class="manageProduct" x-limit-access x-access-level="admin">...</div>
<div class="commnet" x-limit-access x-access-level="user, admin">...</div>
<div class="commnet" x-limit-access x-access-level="admin">...</div>
Javascript コード:
var app = angular.module('home', []);
// var host = 'http://127.0.0.1:8000';
app.config(function($routeProvider){
$routeProvider.
when('/',
{
templateUrl: 'views/home.html',
controller: 'homeCtrl',
resolve: {auth : 'authUser'} //this is a page only for logged in users
}).
when('/login',
{
templateUrl: 'views/login.html',
controller: 'loginCtrl',
resolve: {}
}).
when('/logout',
{
templateUrl: 'views/logout.html',
controller: 'logoutCtrl',
resolve: {auth : 'authUser'} //this is a page only for logged in users
}).
when('/register',
{
templateUrl: 'views/register.html',
controller: 'registerController',
resolve: {}
}).
when('/admin',
{
templateUrl: 'views/admin/home.html',
controller: 'registerController',
resolve: {auth: 'authAdmin'}
}).
otherwise({ redirectTo: '/'});
// $locationProvider.html5Mode(true);
}).
run(function($rootScope, $location, $http, authUser){
$rootScope.$on("$routeChangeError", function(event, current, previous, rejection){
if(rejection.status == 401)
$location.path('/login');
})
$http.get('/users/me', {withCredentials: true}).
success(function(data, status, headers, config){
$rootScope.roles = data.roles;
}).
error(function(data, status, headers, config){
});
});
app.factory('authUser', function($http){
return $http.head('/users/me', {withCredentials: true});
});
app.directive('xLimitAccess', function(){
return{
restrict: 'A',
prioriry: 100000,
scope: {
xAccessLevel: '='
}
compile: function(element,$rootScope){//this is essentially the problem
if(scope.xAccessLevel != $rootScope.roles)
element.children().remove();
elemnet.remove();
}
}
})