Angularjs 限制用户在未使用angular ui路由登录的情况下访问内部页面

我有一个角度的项目。在这种情况下，如果我在url中键入“dashboard”，它将重定向到“dashboard.html”页面。但我想限制用户在未成功登录的情况下进入该页面

下面是我的路线代码，请检查

index.js

angular.module('adminsuite',['ui.router','ngCookies']).config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
    .state('login', {
        url: '/',
        views:{
            pageContent:{
                templateUrl: 'Login/login.html',
                controller: 'loginController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }



    })
    // HOME STATES AND NESTED VIEWS ========================================
     .state('dashboard', {
        url: '/dashboard',
        views:{
            header:{
                templateUrl: 'common/header.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'dashboard/dashboard.html',
                 controller: 'dashboardController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }
    })
    //SURVEY STATES
    .state('survey', {
        url: '/survey',
        views:{
            header:{
                templateUrl: 'common/headerTool.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'survey/survey.html',
                  controller: 'surveyController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }
    });

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================

});

if('successfully logged in'){
  $localStorage.accessToken = 'a random value';
}

---

你可以做一件事。如果用户成功登录，则在

loginController

中创建一个变量并将其存储在

本地存储中。并在您的
仪表板
路由语句中从本地存储解析该数据。只有在可以解析该数据时，页面才会加载到
/dashboard
。如果他没有登录，解析数据将是未定义的

.state('dashboard', {
    url: '/dashboard',
    views:{
        header:{
            templateUrl: 'common/header.html',
            controller: 'headerController'
        },
        pageContent:{
            templateUrl: 'dashboard/dashboard.html',
             controller: 'dashboardController'
        },
        footer:{
            templateUrl: 'common/footer.html',
            controller: 'footerController'
        }
    },
    resolve: {
       accessToken: ['$localStorage', function($localStorage){
           return $localStorage.accessToken
        }]
    }
})

或者您的解析代码可以是

resolve: {
   accessToken: ['$localStorage','$state', function($localStorage, $state){
       if($localStorage.accessToken)
         return $localStorage.accessToken
       else{
         $state.go(login)
         return;
       }
    }]
}

这里变量
accessToken
以
loginController
的形式存储到
$localStorage

angular.module('adminsuite',['ui.router','ngCookies']).config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
    .state('login', {
        url: '/',
        views:{
            pageContent:{
                templateUrl: 'Login/login.html',
                controller: 'loginController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }



    })
    // HOME STATES AND NESTED VIEWS ========================================
     .state('dashboard', {
        url: '/dashboard',
        views:{
            header:{
                templateUrl: 'common/header.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'dashboard/dashboard.html',
                 controller: 'dashboardController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }
    })
    //SURVEY STATES
    .state('survey', {
        url: '/survey',
        views:{
            header:{
                templateUrl: 'common/headerTool.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'survey/survey.html',
                  controller: 'surveyController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }
    });

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================

});

if('successfully logged in'){
  $localStorage.accessToken = 'a random value';
}

您可以使用
sessionStorage
、
$cookieStore
等，而不是
$localStorage
。这是你的选择

还有一个选项在登录时广播变量，如果用户成功登录，则在loginController的仪表板中解析该数据
，并将值存储在$rootscope中

if(userloggedin == true )
{
  $rootscope.loggedinuser = true
}

在仪表板控制器中，从$rootscope获取值，并检查$rootscope.loggedinuser是否等于true，然后dasboard.html页面将显示页面重定向到登录页面

在仪表板控制器中

if($rootscope.loggedinuser !=true)
{
    $state.go('login');
}

您可以使用服务创建一个函数，该函数检查用户是否已登录，它应返回true或false。。。然后从您想要限制的任何页面，在它的控制器中调用该函数，类似这样：
如果（！User.logged_in）{//…将它们重定向到登录页面}
请记住，这应该只用于用户体验设计（例如，不显示该用户缺少使用或功能的站点部分）而不是阻止对内容的访问，这应该总是发生在服务器端。我可以使用$rootScope而不是$localStorage吗？@KISHANPATI当然可以。但请确保一件事，无论您使用的是什么，
localStorage
、
sessionStorage
或
rootScope
都不要忘记清除，当用户登录时，如果您使用$rootScope保存令牌，那么如果用户刷新页面，令牌将丢失。在继续使用$rootscope之前，请注意此情况。我使用了上述代码，但它不起作用。是因为州内有多个视图，所以会出现错误。。无论如何，我会更新我的答案与一个更多的选项。编辑：更新答案是您可以将此代码用于surveyController。如果答案可以接受，请投赞成票。我正在使用这个解决方案。。。但现在我有几十个控制器，而且很难在所有控制器中进行维护。。有没有像指令之类的单点解决方案？？