AngularJS:转发到登录页面进行身份验证，保留路由作为GET参数

AngularJS: forward to login page for authentication, retain route as GET parameter?

本文关键字：路由 保留 参数 GET 身份验证 转发 登录 AngularJS      更新时间：2023-10-30

我有点像Angular新手。我正在尝试编写一个Angular服务，它将在任何页面上检查用户是否登录，如果没有，则将其转发到登录页面，将其当前路径作为GET参数传递。

我快到了，但不太管用。我遇到的问题如下：如果用户转到#/articles/my-articles/，他们就会被转发到#/login/?next=%2Farticles%2F:module%2F。

换句话说，看起来Angular传递的是路由模式，而不是实际的URL。

这是我的身份验证码：

auth.run(['$rootScope', '$location', '$user', 'TOKEN_AUTH', 'PROJECT_SETTINGS', function ($rootScope, $location, $user, TOKEN_AUTH, PROJECT_SETTINGS) {
    var MODULE_SETTINGS = angular.extend({}, TOKEN_AUTH, PROJECT_SETTINGS.TOKEN_AUTH);
    $rootScope.$on('$routeChangeStart', function (e, next, current) {
        if (next.$$route && !next.$$route.anonymous && !$user.authenticated) {
          var nextParam = next.$$route.originalPath;
          $location.url(MODULE_SETTINGS.LOGIN + '?next=' + nextParam);
        }
    });
}]);

我可以使用current.params.module以一种巧妙的方式获得原始路径，但这对我没有帮助，因为似乎routeChangeStart被激发了好几次，而除了最后一次激发之外，所有的current对象都是未定义的。

这是我的路线文件：

articles.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/articles/:module/', {
        templateUrl: 'views/articles/article_list.html',
        controller: 'ArticlesListCtrl'
    })
    .when('/articles/:module/:id/', {
        templateUrl: 'views/articles/article_detail.html',
        controller: 'ArticlesDetailCtrl'
    });
}]);

如何解决此问题？

auth.run(['$rootScope', '$location', '$user', 'TOKEN_AUTH', 'PROJECT_SETTINGS', function ($rootScope, $location, $user, TOKEN_AUTH, PROJECT_SETTINGS) {
    var MODULE_SETTINGS = angular.extend({}, TOKEN_AUTH, PROJECT_SETTINGS.TOKEN_AUTH);
    $rootScope.$on('$routeChangeStart', function (e, next, current) {
        if (!$user.authenticated) {
          $location.url(MODULE_SETTINGS.LOGIN + '?next=' + $location.path());
          $location.replace();
        }
    });
}]);

如果登录不是AngularJS视图，则可能需要提供otherwise路由：
（取决于您的$locationProvider配置）

$routeProvider.otherwise({
    template: 'Redirecting…',
    controller : 'Redirect'
});
...
articles.controller('Redirect', ['$location', function($location) {
    if (someConditionThatChecksIfUrlIsPartOfApp) {
        location.href = $location.path();
        return;
    } else {
        // Show 404
    }
}]);

附带说明：您不应该读取以$$为前缀的属性，它们是私有的AngularJS变量
另外请注意：不要在您自己的代码中使用$前缀（$user），这些是为AngularJS保留的公共属性。

我的解决方案适用于Angular 1.2.13：preventDefault停止角度路由，$window.location将我发送到登录页面。这是在ASP.NET MVC+Angular应用程序上运行的。

$rootScope.$on("$locationChangeStart", function (event, next, current) {
                    event.preventDefault();
                    $window.location = '/Login';
            }        
    });
相关文章：