angularjs - 如果用户未使用 UI-Router 和 AngularJS 登录，则转移到备用主页

Question

我想要两个主页，第一个用于未登录的用户，第二个用于已登录的用户。

这是我目前的设置:

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');
  })

  .factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
    return {
      // Add authorization token to headers
      request: function (config) {
        config.headers = config.headers || {};
        if ($cookieStore.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
        }
        return config;
      },

      // Intercept 401s and redirect you to login
      responseError: function(response) {
        if(response.status === 401) {
          $location.path('/login');
          // remove any stale tokens
          $cookieStore.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        }
      }
    };
  })

  .run(function ($rootScope, $location, Auth) {
    // Redirect to login if route requires auth and you're not logged in
    $rootScope.$on('$stateChangeStart', function (event, next) {
      if (next.authenticate && !Auth.isLoggedIn()) {
        $location.path('/login');
      }
    });
  });
.config(function ($stateProvider) {
        $stateProvider
          .state('main', {
            url: '/',
            templateUrl: 'app/main/main.html',
            controller: 'MainCtrl',
            title: 'Home',
            mainClass: 'home',
            headerSearch: true
          });
      });

我怎样才能重新配置它，以便我可以执行如下操作:

.config(function ($stateProvider) {
    $stateProvider
      .state('welcome', {
        url: '/',
        templateUrl: 'app/welcome/welcome.html',
        controller: 'WelcomeCtrl',
        title: 'Welcome',
        mainClass: 'welcome',
        isLoggedIn: false
      });
     $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl',
        title: 'Home',
        mainClass: 'home',
        isLoggedIn: true
      });
  });

Answer 1

只是想展示，我们如何管理对状态的身份验证驱动访问。基于此answer及其 plunker ，我们可以使用 data 设置丰富每个状态(应该只有经过身份验证的用户才能访问)，此处解释:Attach Custom Data to State Objects (引用:)

You can attach custom data to the state object (we recommend using a data property to avoid conflicts)...

让我们有一些公共(public)访问的状态:

// SEE no explicit data defined
.state('public',{
    url : '/public',
    template : '<div>public</div>',
})
// the log-on screen
.state('login',{
    url : '/login',
    templateUrl : 'tpl.login.html',
    controller : 'UserCtrl',
})
... 

还有一些具有私有(private)访问权限:

// DATA is used - saying I need authentication
.state('some',{
    url : '/some',
    template : '<div>some</div>',
    data : {requiresLogin : true }, // HERE
})
.state('other',{
    url : '/other',
    template : '<div>other</div>',
    data : {requiresLogin : true }, // HERE
})

这可以卡在状态变化上:

.run(['$rootScope', '$state', 'User', function($rootScope, $state, User)
{

  $rootScope.$on('$stateChangeStart'
    , function(event, toState, toParams, fromState, fromParams) {

    var isAuthenticationRequired =  toState.data 
          && toState.data.requiresLogin 
          && !User.isLoggedIn
      ;

    if(isAuthenticationRequired)
    {
      event.preventDefault();
      $state.go('login');
    }
  });
}])

查看所有操作 here

有类似的问答，我试图展示重定向经过身份验证和未经过身份验证的用户的概念:

• Angular UI Router: nested states for home to differentiate logged in and logged out

也许这有助于了解我们如何使用 ui-router 及其事件“$stateChangeStart” Hook 我们的决策管理器 - 及其强制重定向。 .