使用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 。 這是你的選擇。

還有一個選擇。 登錄發生時廣播變量並在儀表板中解析該數據