Question

我正在尝试更改用户访问我的网站时看到的页面。如果他们是匿名的，他们应该看到注册页面。如果他们已经登录，他们应该看到他们的仪表板。

我有一项服务，用于检查用户是否已登录（例如检查cookie），该服务在Angular服务加载时触发。我试图使用$ routeProvider重定向但是在初始化$ routeProvider时没有触发服务，所以它总是认为用户没有登录。

我可以在初始页面加载后轻松重定向但我很难重定向加载的第一页。任何人都可以就如何做到这一点提出建议吗？

Answer 1

请务必阅读答案下的评论。当我回答这个问题时，我没有考虑过单元测试和设计。我只是在证明什么是实现预期结果的众多方法之一

我认为在控制器或app.config.run下执行此操作的最佳方式。在您的情况下，您应该创建另一个模块来检查用户登录状态。将用户登录状态检查模块注入您的应用程序模块。

以下是示例的链接，后跟app.js代码

http://plnkr.co/edit/dCdCEgLjLeGf82o1MttS

var login = angular.module('myLoginCheck', [])
  .factory('$logincheck', function () {
    return function (userid) {
      // Perform logical user logging. Check either 
      // by looking at cookies or make a call to server.
      if (userid > 0) return true;
      return false;
    };
  });

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

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/publicurl', {})
      .when('/loginurl', {})
      .when('/unauthorize', {})
      .otherwise({redirectTo: '/'});
  })
  .run(function ($logincheck, $location) {
    //console.log("Into run mode");
    console.log("Userid 5 is logged in: ", $logincheck(5));
    console.log("Userid 0  logged in: ", $logincheck(0));

    //now redirect to appropriate path based on login status
    if ($logincheck(0)) {
      //$location.path('/loginurl'); or          
    }
    else {
      //$location.path('/publicurl'); or 
    }
  });

app.controller('MainCtrl', function ($scope) {
  $scope.name = 'World';
});

Answer 2

我刚刚做了这个，通过为/ path创建一个虚拟模板和小控制器，并根据需要进行重定向。

controllers.controller('loginController',
                       ['$scope', '$location', '$cookies',
                        function($scope, $location, $cookies) {
    if (!!$cookies.user) {
        console.log("already logged in!");
        $location.path('/shows');
    } else {
        console.log("need to login!");
        $location.path('/users');
    }
}]);

var app = angular.module('app', ['ngRoute', 'ngCookies', 'controllers', 'services']);

app.config(['$routeProvider',
            function($routeProvider) {
    $routeProvider.when('/users', {
        templateUrl: "partial/users.html",
        controller: 'userController'
    });
    $routeProvider.when('/shows', {
        templateUrl: "partial/shows.html",
        controller: 'showController'
    });
    $routeProvider.when('/', {
        template: '',
        controller: 'loginController'
    });
    $routeProvider.otherwise({
        redirectTo: '/'
    });
}]);

如果用户登录AngularJS，则重定向索引页面

2 个答案: