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



我想要两个主页,第一个是为尚未登录的用户,第二个是为已登录的用户。

这是我目前的设置:

.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
      });
  });

只是想展示一下,我们如何管理对状态的身份验证驱动访问。基于这个答案及其plunker,我们可以使用data设置来丰富每个状态(应该只有经过身份验证的用户才能访问(,如下所述:将自定义数据附加到状态对象上(引用:(

您可以将自定义数据附加到状态对象(建议使用数据属性以避免冲突(。。。

因此,让我们让一些州拥有公共访问权限:

// 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',
})
... 

还有一些具有私人访问权限:

// 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');
    }
  });
}])

在这里看到所有的行动

也有类似的问答;A我试图展示重定向已验证和未验证用户的概念:

  • Angular UI路由器:home的嵌套状态,用于区分登录和注销

也许这可以帮助我们了解如何使用ui-router及其事件"$stateChangeStart"来挂接我们的决策管理器,以及它的强制重定向

代码应该类似于这个

     $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState)                { //, fromParams
       console.log(toState.name + "," + fromState.name);
        if(fromState.name === "") {
          if (Auth.isLoggedIn()) {
              $state.go('welcome');
               event.preventDefault();
          } else {
            $state.go('home');
               event.preventDefault();
        } else {
           if (toState.authenticate && !Auth.isLoggedIn()) {
               $toState.go('login');
               event.preventDefault();
           }
        }
    }

所以如果用户进入应用程序,那么如果他登录了,就把他带到welcome,否则就把他送到home

一旦他进入,如果他找到了需要授权的路线。。然后将他重定向到登录页面。。

对不起,如果我没有完全理解你的要求。。。

.config(function ($stateProvider,$rootScope) {
$stateProvider
  .state('welcome', {
    url: '/',
    templateUrl: 'app/welcome/welcome.html',
    controller: 'WelcomeCtrl',
    onEnter: function() {
      if (userIsLoggedIn()) {
         $stateProvider.go('home');
      }
  });

});

我遇到了这样的问题,我像一样解决了它

 .run(function ($rootScope, $location, AuthService) {
        // start showing PRELOADER because we doing async call and we dont know when it will be resolved/rej
        AuthService.checkLoginStatus().then(
            (resp) => {
                // fire logged in user event
                $rootScope.$broadcast('userLogged',resp);
                $location.path(YourHomePageUrl);
            },
            (err)=> {  
                // Check that the user is not authorized redirect to login page                  
                    $location.path(loginURL);
                }
            }).finally(
            ()=> {
                // finnaly Set a watch on the $routeChangeStart
                /// Hide PRELOADER
                $rootScope.$on('$routeChangeStart',
                    function (evt, next, curr) {
                      if (!AuthService.isLoggedIn()) {
                                $location.path(art7.API.loginURL);
                            }
                    });
            }
        )

    });

我没有使用拦截器来处理401未经授权的错误,这是我的解决方案

最新更新