1. 程式人生 > >angular 未登入狀態攔截路由跳轉

angular 未登入狀態攔截路由跳轉

使用angularjs的但頁面應用時,由於是本地路由在控制頁面跳轉,但是有的時候我們需要判斷使用者是否登入來判斷使用者是否能進入介面。

angularjs是mvc架構所以實現起來很容易也很靈活,我們只MainController裡增加一個路由事件偵聽並判斷,這樣就可以避免未登入使用者直接輸入路由地址來跳轉到登入介面地址了。

第一步:定義myapp

var myapp=angular.module("MainController",["ui.router",'infinite-scroll','oc.lazyLoad']);

第二步:使用config來配置路由跳轉

myapp.config(
    function($stateProvider,$urlRouterProvider,$ocLazyLoadProvider,$httpProvider){
    $stateProvider
        .state('index', {//首頁
            url: '/index',
            templateUrl: basePath+'page/gym/lecycle_index.html',
            resolve: {
                  loadMyCtrl: ['$ocLazyLoad'
, function($ocLazyLoad){//這兩行就是loader的使用,此行寫法固定 return $ocLazyLoad.load(basePath+'src/lecycle_index/le_index.js');//後面這個就是進入這個模板時候要載入進來的js }] } }) .state('userAgree',{//同意使用者協議頁面 url:"/userAgree", templateUrl:basePath+'page/agreement.html'
}) ....... $urlRouterProvider.otherwise("/index");/*BproDtails*/ });

第三步:使用run來進行登入驗證攔截

myapp.run(function ($rootScope,$state) {
    $rootScope.$on('$stateChangeStart',function(event){
        // if(toState.name=='login')return;// 如果是進入登入介面則允許
        // 如果使用者不存在
        if(ifLoginTrue==false){
            console.log("沒有登入")
            event.preventDefault();// 取消預設跳轉行為
            $("#my-modal-loading").modal('open');//開啟載入中loading

            // $state.go("login",{from:fromState.name,w:'notLogin'});//跳轉到登入介面
        }
    });
});