使用angular-ui-route限制用户无需登录即可进入内页

Question

我有一个有角度的项目。 如果我在网址中键入“仪表板”，则会重定向到“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 =================================

});

Answer 1

如果用户成功登录，则在$ rootscope中的loginController存储值中。

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

在您的dashboardController中从$ rootscope获取值并检查$ rootscope.loggedinuser是否等于true然后dasboard.html页面将显示否则页面重定向到登录页面。

在您的dashboardController中

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

Answer 2

你可以做一件事。 在loginController创建变量并在用户成功登录时将其存储在local storage中。并在dashboard路由语句中从本地存储中解析该数据。 仅当页面可以解析该数据时，该页面才会加载到/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中

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

您可以使用sessionStorage ， $cookieStore等代替$localStorage 。 这是你的选择。

还有一个选择。 登录发生时广播变量并在仪表板中解析该数据