使用AngularJS管理动态路由

时间:2017-07-04 15:37:31

标签: javascript angularjs routing

我有一个AngularJS应用程序(Angular v1),它都使用安全登录。未经过身份验证的用户只能看到登录页面,忘记密码页面和cookie策略。

我正在使用ngRoute这样:

    $routeProvider
    .when('/login:param', {
        templateUrl: 'app/login/login.html',
        controller: 'loginCtrl',
        controllerAs: 'vm'
    })

    /* ... other routes ... */

    .otherwise({
        redirectTo: '/login'
    });

现在,如果用户登录时无法查看所有“公共路由”(==用户无需身份验证即可看到的路由),我想将用户重定向到仪表板;如果他们没有登录,则将其重定向到登录页面。

为此,我正在检查Angular run函数并收听$locationChangeStart事件:

    $rootScope.$on('$locationChangeStart', function (event, next, current) {
        if (routeClean($location.path()) && AuthenticationService.isLoggedIn()) {
            $location.url(DASHBOARD);
        } else {
            $location.url(LOGIN);
        }
    });

其中DASHBOARD是一个包含/dashboardLOGIN路线的常量,是一个包含/login路线的常量。

在继续之前,我有几个问题:

  • run是执行此项检查的正确位置吗?(即使它正常工作,也许此检查应放在其他地方)
  • 实现这一目标的最佳做法是什么?

在此检查中,AuthenticationService是一个正在验证用户的服务,而routeClean是一个检查路由是否在数组中的函数:

    var routeClean = function (route) {
        for (var i = 0; i < CLEAN_ROUTES.length; i++) {
            var pattern = new RegExp(CLEAN_ROUTES[i]);
            var bool = pattern.test(route);
            if (bool)
                return true;
        }
        return false;
    };

其中CLEAN_ROUTES是一个包含所有“公共路线”的数组。

    CLEAN_ROUTES = [
        '/login',
        '/forgotten-password',
        '/verify-code',
        '/reset-password',
        '/cookie-policy'
    ]

所以,这里是最后的问题:

  • 使用Angular检查“公共路线”有更聪明的方法吗?
  • 例如,如果我想为用户显示不同的登录模板,请执行以下操作:

    /login?user=client
    /login?user=seller
    /login?user=editor
    /login?user=admin
    

ngRoute是否可以动态地执行此操作?

我对这个最新问题的意思是:例如,当用户注销应用程序时,我将它们重定向到LOGIN常量(这是登录页面{{1}的一般路径) }),是否有一种方法可以区分卖家,客户等,以便我可以将它们重定向到正确的登录模板/页面?

1 个答案:

答案 0 :(得分:0)

IMO $httpProvider.interceptors是最有效的方式。

在ngRoute中,您可以使用 -

$ routeProvider - &gt; &#39;路线&#39; - &GT; resolve属性