Question

我正在以角度设置门禁控制系统。这是它到目前为止的样子。它正在执行ajax以返回当前用户的角色，然后使用访问数组检查该角色以查看用户是否具有权限。如果不是，它会重定向。

一切正常，但在重定向之前，视图仍会显示一瞬间。

注意ajax请求是必要的，因为正在使用Laravel处理用户身份验证，所以我为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 /浏览器的问题，请参阅this page。

在resolve检查访问之前加载angularjs视图

1 个答案: