Question

我正在使用Angular制作一个用于前端的Web应用程序。如果用户的角色是教师试图访问申请人的门户网站，我想通过显示404.html模板来阻止他们。我不想将用户重定向到www.example.com/404，而只是让他们留在www.example.com/teacher的位置，但渲染404.html模板。

我不确定如何使用ngroute实现此目的。这是我在app.js中的代码：

app.config(['$routeProvider', '$locationProvider', 'CookieProvider',
    function ($routeProvider, $locationProvider, CookieProvider) {
            var cookieData = CookieProvider.$get().getCookieData();

$routeProvider.when('/applicant', {
            templateUrl: '/front-end/public/views/Prescreening/review.html',
            controller: 'ReviewCtrl',
            resolve:{
                "check":function($location, CookieService) {
                            var cookieData = CookieService.get();
                            if(cookieData["user_role"] == 'teacher'){
                                $location.path('/404')
                            }
                }
            }
        }).when('/404', {
            templateUrl: '/404.html'
        }).otherwise({
            templateUrl: '/404.html'
  });
  }]);

如何在不将用户重定向到/404的情况下呈现404.thml？

Answer 1

假设您有这样的州。

.state('dashboard.users', {
    url: '/users/:isAdmin',
    templateUrl: 'modules/dashboard/templates/users.html',
    controller: 'usersController',
})

试试这个。

angular.module(...)
    .config( ['$routeProvider', function($routeProvider) {...}] )
    .run(function($rootScope, $location) {
        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
            // You can pass the user role to the params 
            // of the state and you will see that on the 
            // toParams call callback ex. {isAdmin:false}
            if(!toParams.isAmin){
                toState.templateUrl = "modules/404/templates/404.html";
            }
        });
    })
})

<强>更新

回调toState实际上包含以下内容

url =当前状态的网址ex。 /user
templateUrl =模板ex的路径。 path/to/something.html
controller =州的控制器名称。 usersController
name =州名ex。 dashboard.user

此行执行时toState.templateUrl = "modules/404/templates/404.html";您所在州的当前模板属于<div ui-view></div>，其中包含您所需的404.html。

重要

您必须使用ui.router而非ngRouter才能使此实施工作。

Answer 2

经过一番努力，我开始工作......以下是不同的代码......

我使用过凉亭，所以请用你的路径替换..

这是插件..我让它工作.. https://plnkr.co/edit/dK7n6PmhldJ1p0plWPp2?p=preview

index.js

var app = angular.module('myApp',['ngRoute']);
app.config(['$routeProvider',function ($routeProvider) {

        $routeProvider
        .when('/applicant', {
            template: 'Applicant!',
            controller: function($scope){
              alert("Applicant Controller");
            }
        })
        .when('/404', {
            templateUrl: '404'
        })
        .otherwise({
            templateUrl : '404.html'
        });

}]);

的index.html

<html>
    <head>

        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script src = "index.js"></script>

    </head>
    <body ng-app="myApp">
        <ng-view></ng-view>
    </body>
</html>

404.html

<h1>404 page</h1>

使用ngroute重定向Angular中的未授权用户

2 个答案: