在解決檢查訪問之前加載angularjs視圖

Question

我正在按角度設置訪問控制系統。 到目前為止是這樣。 它執行ajax返回當前用戶的角色，然后使用訪問數組檢查該角色以查看用戶是否具有權限。 如果不是，它將重定向。

一切正常，但是仍然在重定向之前的一秒鍾內顯示視圖。

還可能需要注意，因為使用laravel處理用戶身份驗證，所以ajax請求是必需的，因此我為Angular創建了一個API來獲取有關用戶會話的信息。

var app = angular.module('application', ['ngResource']);

app.config(function($routeProvider){
    $routeProvider
        .when('/admin', {
            controller: 'showAdmin',
            templateUrl: 'admin.html',
            access: ['Admin', 'Manager'],
            resolve: AppCtrl.resolve
        });
});

function AppCtrl ($scope, getUser, $location, $rootScope) {

}

AppCtrl.resolve = {
    getUser : function($q, $http, $location, $rootScope) {
        return $http({
            method: 'GET',
            url: '/api/getUser'
        })
        .success(function(data, status) {
            $rootScope.user = data;
            if($rootScope.access.indexOf(data.permissions[0].role_name) < 0) $location.path('/');
        });
    }
};

app.run(function ($rootScope, sessionFactory, $location){
    $rootScope.$on('$routeChangeStart', function (event, next) {
        $rootScope.access = next.access;
    });
});

Answer 1

在包含元素上使用ng-cloak指令可消除閃爍。 請參閱此頁面的示例，以及一些特定於CSS /瀏覽器的陷阱。