根据条件重定向到某条路线


493

我正在编写一个小的AngularJS应用,该应用具有登录视图和主视图,其配置如下:

$routeProvider
 .when('/main' , {templateUrl: 'partials/main.html',  controller: MainController})
 .when('/login', {templateUrl: 'partials/login.html', controller: LoginController})
 .otherwise({redirectTo: '/login'});

我的LoginController检查用户/密码组合,并在$ rootScope上设置一个属性,以反映此情况:

function LoginController($scope, $location, $rootScope) {
 $scope.attemptLogin = function() {
   if ( $scope.username == $scope.password ) { // test
        $rootScope.loggedUser = $scope.username;
        $location.path( "/main" );
    } else {
        $scope.loginError = "Invalid user/pass.";
    }
}

一切正常,但是如果我访问http://localhost/#/main,最终将绕过登录屏幕。我想写一些类似的内容,“每当路由更改时,如果$ rootScope.loggedUser为null,则重定向到/ login”

...

...等等。我可以听路线变化吗?无论如何,我都会发布这个问题并继续寻找。


3
需要澄清的是:虽然下面的许多解决方案都可以正常工作,但我最近更倾向于接受@Oran的以下回答-也就是说,当服务器要求输入敏感的URL时让服务器响应401代码,并使用该信息进行控制客户端上的“登录框”。(但是,至少在我看来,陪审团仍在“排队被拒绝的请求并稍后再发送”)上
仍然无法解决

Answers:


510

在仔细阅读了一些文档和源代码之后,我认为我可以使用它。也许这对其他人有用吗?

我在模块配置中添加了以下内容:

angular.module(...)
 .config( ['$routeProvider', function($routeProvider) {...}] )
 .run( function($rootScope, $location) {

    // register listener to watch route changes
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
      if ( $rootScope.loggedUser == null ) {
        // no logged user, we should be going to #login
        if ( next.templateUrl != "partials/login.html" ) {
          // not going to #login, we should redirect now
          $location.path( "/login" );
        }
      }         
    });
 })

一件奇怪的事情是,我必须测试部分名称(login.html),因为“下一个” Route对象没有url或其他名称。也许有更好的方法?


13
很好,谢谢您分享您的解决方案。需要注意的一件事:在当前版本中,它是“ next。$ route.templateUrl”
doubledriscoll 2012年

5
如果您在chrome inspector中查看网络请求,则仍将调用要重定向的路由(因为用户未登录),并且将响应发送到浏览器,然后调用重定向的路径“ / login”。因此,这种方法不好用,因为未登录的用户可以看到他们不应该访问的路由的响应。
sonicboom

34
使用$ locationChangeStart而不是$ routeChangeStart来防止路由被调用,并使未经身份验证的用户查看他们不应该访问的内容。
sonicboom

17
请记住,这是客户。还应该有一个服务器端障碍。
Neikos 2013年

2
@sonicboom $ locationChangeStart如果不是所有路由都需要身份验证,则没有意义,使用$ routeChangeStart可以在路由对象上包含元数据,例如是否已通过身份验证或该路由需要哪些角色。您的服务器应处理不显示未经身份验证的内容,并且直到路由更改后,AngularJS才开始处理,因此应不显示任何内容。
克里斯·尼古拉

93

这可能是一个更优雅,更灵活的解决方案,具有“解决”配置属性和“承诺”,可最终在路由上加载数据,并根据数据进行路由规则。

您可以在路由配置的“解决”中指定一个功能,然后在功能加载和检查数据中进行所有重定向。如果需要加载数据,则返回承诺,如果需要重定向-在此之前拒绝承诺。所有详细信息都可以在$ routerProvider$ q文档页面上找到。

'use strict';

var app = angular.module('app', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: "login.html",
                controller: LoginController
            })
            .when('/private', {
                templateUrl: "private.html",
                controller: PrivateController,
                resolve: {
                    factory: checkRouting
                }
            })
            .when('/private/anotherpage', {
                templateUrl:"another-private.html",
                controller: AnotherPriveController,
                resolve: {
                    factory: checkRouting
                }
            })
            .otherwise({ redirectTo: '/' });
    }]);

var checkRouting= function ($q, $rootScope, $location) {
    if ($rootScope.userProfile) {
        return true;
    } else {
        var deferred = $q.defer();
        $http.post("/loadUserProfile", { userToken: "blah" })
            .success(function (response) {
                $rootScope.userProfile = response.userProfile;
                deferred.resolve(true);
            })
            .error(function () {
                deferred.reject();
                $location.path("/");
             });
        return deferred.promise;
    }
};

对于说俄语的人,在habr上有一个帖子“ AngularJSВариантусловногораутинга”


1
为什么将checkRouting函数映射到工厂?它映射到什么有关系吗?
honkskillet 2015年

@honkskillet:来自$ routeProvider的有角文档:“ factory-{string | function}:如果为string,则它是服务的别名。否则,如果为function,则将其注入,并将返回值视为依赖项。结果是一个承诺,它会在将其值注入控制器之前进行解析。请注意,ngRoute。$ routeParams仍将引用这些解析函数中的先前路由。请使用$ route.current.params访问新的路由参数,代替。” 同样来自于解决文档:“如果任何承诺被拒绝,则会触发$ routeChangeError事件。”
蒂姆·佩里

如果ui.router使用,请使用$stateProvider 代替$routeProvider
TRiNE

61

我一直在尝试做同样的事情。与同事合作后,提出了另一个更简单的解决方案。我有一只手表在上面$location.path()。这样就可以了。我刚刚开始学习AngularJS,并发现它更清晰易读。

$scope.$watch(function() { return $location.path(); }, function(newValue, oldValue){  
    if ($scope.loggedIn == false && newValue != '/login'){  
            $location.path('/login');  
    }  
});

这看起来很有趣。您可以在某个地方发布示例了吗?
kyleroche 2013年

3
您在哪里安装手表?
freakTheMighty

3
@freakTheMighty您必须在mainCtrl函数中设置手表,其中ng-controller设置为mainCtrl。例如<body ng-controller =“ mainCtrl”>
user1807337

5
我认为,如果投了反对票,那应该是有道理的。它将作为一种学习工具提供帮助。
user1807337

37

实现登录重定向的另一种方法是使用事件和拦截器,如此处所述。本文介绍了一些其他优点,例如检测何时需要登录,排队请求以及在登录成功后重播请求。

你可以试玩试用工作在这里和观看演示源在这里


3
您能否更新此答案以包含链接中的相关信息?这样,即使链接断开,它也将继续对访问者有用。
josliber

34

1.设置全局当前用户。

在您的身份验证服务中,在根作用域上设置当前已身份验证的用户。

// AuthService.js

  // auth successful
  $rootScope.user = user

2.在每个受保护的路由上设置身份验证功能。

// AdminController.js

.config(function ($routeProvider) {
  $routeProvider.when('/admin', {
    controller: 'AdminController',
    auth: function (user) {
      return user && user.isAdmin
    }
  })
})

3.在每个路由更改上检查身份验证。

// index.js

.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeStart', function (ev, next, curr) {
    if (next.$$route) {
      var user = $rootScope.user
      var auth = next.$$route.auth
      if (auth && !auth(user)) { $location.path('/') }
    }
  })
})

或者,您可以在用户对象上设置权限并为每个路由分配权限,然后在事件回调中检查权限。


@malcolmhall是的,这是选择加入,您想选择退出。而是向登录页面之类的公共路线添加“公共”布尔值,然后重定向if (!user && !next.$$route.public)
AJcodez 2015年

有人可以next.$$route向我解释吗?我觉得没什么描述的参数给一个角的文档$routeChangeStart事件,但我想nextcurr有某种位置的对象?该$$route位很难谷歌。
skagedal 2015年

2
现在,我看到该$$route属性是Angular的私有变量。您不应该依赖它,例如,请参见:stackoverflow.com/a/19338518/1132101-如果这样做,则当Angular更改时,代码可能会中断。
skagedal,2015年

2
我找到了一种访问路由的方法,而无需访问私有属性或不必循环$route.routes生成列表(如@thataustin的回答):使用来获取位置的路径next.originalPath并将其用于索引$route.routesvar auth = $route.routes[next.originalPath]
skagedal

至于从关于事件的给定参数的三个评论中回答我的问题-它们似乎确实没有记录,请参见此问题,该问题也恰好引用了此SO问题:github.com/angular/angular.js/issues/ 10994
异想天开

27

如果这样做可以帮助任何人,这是我的操作方法:

在配置中,我设置了publicAccess一些我想向公众开放的路由(例如登录或注册)的属性:

$routeProvider
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
    })
    .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        publicAccess: true
    })

然后在运行块中,在$routeChangeStart重定向到的事件上设置侦听器,'/login'除非用户有权访问或路由可公开访问:

angular.module('myModule').run(function($rootScope, $location, user, $route) {

    var routesOpenToPublic = [];
    angular.forEach($route.routes, function(route, path) {
        // push route onto routesOpenToPublic if it has a truthy publicAccess value
        route.publicAccess && (routesOpenToPublic.push(path));
    });

    $rootScope.$on('$routeChangeStart', function(event, nextLoc, currentLoc) {
        var closedToPublic = (-1 === routesOpenToPublic.indexOf($location.path()));
        if(closedToPublic && !user.isLoggedIn()) {
            $location.path('/login');
        }
    });
})

您显然可以将条件从isLoggedIn任何其他更改为……只是显示了另一种方法。


您的运行块参数中的用户是什么?服务吗?
mohamnag 2014年

是的,这是看到一个服务,它检查的饼干护理等。如果用户登录。
thataustin

您可以像nextLoc.$$route.publicAccessbtw 一样访问路线。
AJcodez 2014年

或使用$route.routes[nextLoc.originalPath],而不使用私有变量。
skagedal

1
实际上,您只需检查一下即可nextLoc && nextLoc.publicAccess
skagedal,2015年

9

我正在使用拦截器。我创建了一个库文件,可以将其添加到index.html文件中。这样,您就可以对其余服务调用进行全局错误处理,而不必单独关心所有错误。再往下,我还粘贴了我的基本身份验证登录库。在那里,您可以看到我还检查了401错误并重定向到其他位置。参见lib / ea-basic-auth-login.js

lib / http-error-handling.js

/**
* @ngdoc overview
* @name http-error-handling
* @description
*
* Module that provides http error handling for apps.
*
* Usage:
* Hook the file in to your index.html: <script src="lib/http-error-handling.js"></script>
* Add <div class="messagesList" app-messages></div> to the index.html at the position you want to
* display the error messages.
*/
(function() {
'use strict';
angular.module('http-error-handling', [])
    .config(function($provide, $httpProvider, $compileProvider) {
        var elementsList = $();

        var showMessage = function(content, cl, time) {
            $('<div/>')
                .addClass(cl)
                .hide()
                .fadeIn('fast')
                .delay(time)
                .fadeOut('fast', function() { $(this).remove(); })
                .appendTo(elementsList)
                .text(content);
        };

        $httpProvider.responseInterceptors.push(function($timeout, $q) {
            return function(promise) {
                return promise.then(function(successResponse) {
                    if (successResponse.config.method.toUpperCase() != 'GET')
                        showMessage('Success', 'http-success-message', 5000);
                    return successResponse;

                }, function(errorResponse) {
                    switch (errorResponse.status) {
                        case 400:
                            showMessage(errorResponse.data.message, 'http-error-message', 6000);
                                }
                            }
                            break;
                        case 401:
                            showMessage('Wrong email or password', 'http-error-message', 6000);
                            break;
                        case 403:
                            showMessage('You don\'t have the right to do this', 'http-error-message', 6000);
                            break;
                        case 500:
                            showMessage('Server internal error: ' + errorResponse.data.message, 'http-error-message', 6000);
                            break;
                        default:
                            showMessage('Error ' + errorResponse.status + ': ' + errorResponse.data.message, 'http-error-message', 6000);
                    }
                    return $q.reject(errorResponse);
                });
            };
        });

        $compileProvider.directive('httpErrorMessages', function() {
            return {
                link: function(scope, element, attrs) {
                    elementsList.push($(element));
                }
            };
        });
    });
})();

css / http-error-handling.css

.http-error-message {
    background-color: #fbbcb1;
    border: 1px #e92d0c solid;
    font-size: 12px;
    font-family: arial;
    padding: 10px;
    width: 702px;
    margin-bottom: 1px;
}

.http-error-validation-message {
    background-color: #fbbcb1;
    border: 1px #e92d0c solid;
    font-size: 12px;
    font-family: arial;
    padding: 10px;
    width: 702px;
    margin-bottom: 1px;
}

http-success-message {
    background-color: #adfa9e;
    border: 1px #25ae09 solid;
    font-size: 12px;
    font-family: arial;
    padding: 10px;
    width: 702px;
    margin-bottom: 1px;
}

index.html

<!doctype html>
<html lang="en" ng-app="cc">
    <head>
        <meta charset="utf-8">
        <title>yourapp</title>
        <link rel="stylesheet" href="css/http-error-handling.css"/>
    </head>
    <body>

<!-- Display top tab menu -->
<ul class="menu">
  <li><a href="#/user">Users</a></li>
  <li><a href="#/vendor">Vendors</a></li>
  <li><logout-link/></li>
</ul>

<!-- Display errors -->
<div class="http-error-messages" http-error-messages></div>

<!-- Display partial pages -->
<div ng-view></div>

<!-- Include all the js files. In production use min.js should be used -->
<script src="lib/angular114/angular.js"></script>
<script src="lib/angular114/angular-resource.js"></script>
<script src="lib/http-error-handling.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>

lib / ea-basic-auth-login.js

登录几乎可以完成。在这里,您可以找到重定向的答案($ location.path(“ / login”))。

/**
* @ngdoc overview
* @name ea-basic-auth-login
* @description
*
* Module that provides http basic authentication for apps.
*
* Usage:
* Hook the file in to your index.html: <script src="lib/ea-basic-auth-login.js">  </script>
* Place <ea-login-form/> tag in to your html login page
* Place <ea-logout-link/> tag in to your html page where the user has to click to logout
*/
(function() {
'use strict';
angular.module('ea-basic-auth-login', ['ea-base64-login'])
    .config(['$httpProvider', function ($httpProvider) {
        var ea_basic_auth_login_interceptor = ['$location', '$q', function($location, $q) {
            function success(response) {
                return response;
            }

            function error(response) {
                if(response.status === 401) {
                    $location.path('/login');
                    return $q.reject(response);
                }
                else {
                    return $q.reject(response);
                }
            }

            return function(promise) {
                return promise.then(success, error);
            }
        }];
        $httpProvider.responseInterceptors.push(ea_basic_auth_login_interceptor);
    }])
    .controller('EALoginCtrl', ['$scope','$http','$location','EABase64Login', function($scope, $http, $location, EABase64Login) {
        $scope.login = function() {
            $http.defaults.headers.common['Authorization'] = 'Basic ' + EABase64Login.encode($scope.email + ':' + $scope.password);
            $location.path("/user");
        };

        $scope.logout = function() {
            $http.defaults.headers.common['Authorization'] = undefined;
            $location.path("/login");
        };
    }])
    .directive('eaLoginForm', [function() {
        return {
            restrict:   'E',
            template:   '<div id="ea_login_container" ng-controller="EALoginCtrl">' +
                        '<form id="ea_login_form" name="ea_login_form" novalidate>' +
                        '<input id="ea_login_email_field" class="ea_login_field" type="text" name="email" ng-model="email" placeholder="E-Mail"/>' +
                        '<br/>' +
                        '<input id="ea_login_password_field" class="ea_login_field" type="password" name="password" ng-model="password" placeholder="Password"/>' +
                        '<br/>' +
                        '<button class="ea_login_button" ng-click="login()">Login</button>' +
                        '</form>' +
                        '</div>',
            replace: true
        };
    }])
    .directive('eaLogoutLink', [function() {
        return {
            restrict: 'E',
            template: '<a id="ea-logout-link" ng-controller="EALoginCtrl" ng-click="logout()">Logout</a>',
            replace: true
        }
    }]);

angular.module('ea-base64-login', []).
    factory('EABase64Login', function() {
        var keyStr = 'ABCDEFGHIJKLMNOP' +
            'QRSTUVWXYZabcdef' +
            'ghijklmnopqrstuv' +
            'wxyz0123456789+/' +
            '=';

        return {
            encode: function (input) {
                var output = "";
                var chr1, chr2, chr3 = "";
                var enc1, enc2, enc3, enc4 = "";
                var i = 0;

                do {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);

                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;

                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }

                    output = output +
                        keyStr.charAt(enc1) +
                        keyStr.charAt(enc2) +
                        keyStr.charAt(enc3) +
                        keyStr.charAt(enc4);
                    chr1 = chr2 = chr3 = "";
                    enc1 = enc2 = enc3 = enc4 = "";
                } while (i < input.length);

                return output;
            },

            decode: function (input) {
                var output = "";
                var chr1, chr2, chr3 = "";
                var enc1, enc2, enc3, enc4 = "";
                var i = 0;

                // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
                var base64test = /[^A-Za-z0-9\+\/\=]/g;
                if (base64test.exec(input)) {
                    alert("There were invalid base64 characters in the input text.\n" +
                        "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
                        "Expect errors in decoding.");
                }
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

                do {
                    enc1 = keyStr.indexOf(input.charAt(i++));
                    enc2 = keyStr.indexOf(input.charAt(i++));
                    enc3 = keyStr.indexOf(input.charAt(i++));
                    enc4 = keyStr.indexOf(input.charAt(i++));

                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;

                    output = output + String.fromCharCode(chr1);

                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }

                    chr1 = chr2 = chr3 = "";
                    enc1 = enc2 = enc3 = enc4 = "";

                } while (i < input.length);

                return output;
            }
        };
    });
})();

2
除非您有指令,否则您实际上应该远离在JS中进行dom操作。如果您只是设置逻辑,然后使用ng-class来应用一个类并触发CSS动画,那么稍后您将感激不尽。
Askdesigners 2014年

7

在您的app.js文件中:

.run(["$rootScope", "$state", function($rootScope, $state) {

      $rootScope.$on('$locationChangeStart', function(event, next, current) {
        if (!$rootScope.loggedUser == null) {
          $state.go('home');
        }    
      });
}])

4

可以使用angular-ui-router重定向到另一个视图。为此,我们有方法$state.go("target_view")。例如:

 ---- app.js -----

 var app = angular.module('myApp', ['ui.router']);

 app.config(function ($stateProvider, $urlRouterProvider) {

    // Otherwise
    $urlRouterProvider.otherwise("/");

    $stateProvider
            // Index will decide if redirects to Login or Dashboard view
            .state("index", {
                 url: ""
                 controller: 'index_controller'
              })
            .state('dashboard', {
                url: "/dashboard",
                controller: 'dashboard_controller',
                templateUrl: "views/dashboard.html"
              })
            .state('login', {
                url: "/login",
                controller: 'login_controller',
                templateUrl: "views/login.html"
              });
 });

 // Associate the $state variable with $rootScope in order to use it with any controller
 app.run(function ($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    });

 app.controller('index_controller', function ($scope, $log) {

    /* Check if the user is logged prior to use the next code */

    if (!isLoggedUser) {
        $log.log("user not logged, redirecting to Login view");
        // Redirect to Login view 
        $scope.$state.go("login");
    } else {
        // Redirect to dashboard view 
        $scope.$state.go("dashboard");
    }

 });

----- HTML -----

<!DOCTYPE html>
<html>
    <head>
        <title>My WebSite</title>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="MyContent">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="js/libs/angular.min.js" type="text/javascript"></script>
        <script src="js/libs/angular-ui-router.min.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>

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

3

如果您不想使用angular-ui-router,但希望通过RequireJS延迟加载控制器,则$routeChangeStart在将控制器用作RequireJS模块(延迟加载)时会遇到一些事件问​​题。

您无法确定控制器是否会在$routeChangeStart触发之前加载-实际上不会加载。这意味着您无法访问next路由属性,例如locals或,$$route因为尚未设置。
例:

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.when("/foo", {
        controller: "Foo",
        resolve: {
            controller: ["$q", function($q) {
                var deferred = $q.defer();
                require(["path/to/controller/Foo"], function(Foo) {
                    // now controller is loaded
                    deferred.resolve();
                });
                return deferred.promise;
            }]
        }
    });
}]);

app.run(["$rootScope", function($rootScope) {
    $rootScope.$on("$routeChangeStart", function(event, next, current) {
        console.log(next.$$route, next.locals); // undefined, undefined
    });
}]);

这意味着您无法在其中检查访问权限。

解:

由于控制器的加载是通过resolve完成的,因此您可以对访问控制进行检查:

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider.when("/foo", {
        controller: "Foo",
        resolve: {
            controller: ["$q", function($q) {
                var deferred = $q.defer();
                require(["path/to/controller/Foo"], function(Foo) {
                    // now controller is loaded
                    deferred.resolve();
                });
                return deferred.promise;
            }],
            access: ["$q", function($q) {
                var deferred = $q.defer();
                if (/* some logic to determine access is granted */) {
                    deferred.resolve();
                } else {
                    deferred.reject("You have no access rights to go there");
                }
                return deferred.promise;
            }],
        }
    });
}]);

app.run(["$rootScope", function($rootScope) {
    $rootScope.$on("$routeChangeError", function(event, next, current, error) {
        console.log("Error: " + error); // "Error: You have no access rights to go there"
    });
}]);

请注意,这里$routeChangeStart我使用的不是事件$routeChangeError


-4
    $routeProvider
 .when('/main' , {templateUrl: 'partials/main.html',  controller: MainController})
 .when('/login', {templateUrl: 'partials/login.html', controller: LoginController}).
 .when('/login', {templateUrl: 'partials/index.html', controller: IndexController})
 .otherwise({redirectTo: '/index'});

这是基本的路由配置...在重定向到已配置的路由之前,我们在哪里检查任何条件?
TJ
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.