ionic开发之登录状态判断，页面跳转

在项目开发中，经常会碰到有些页面要登录才能显示，一般都是在页面加载后，判断用户登录状态，未登录的话就跳转到登录页，但是在ionic开发的时候，如果在进入了页面后再判断登录状态跳转的话，当前这个页面会被路由自动记录到历史记录中去，这时候如果你不登录，点击返回的话，就会直接返回刚才那个需要登录才能显示的页面，那该肿么办呢？

方法一
你要是愿意的话，可以在每个需要登录的页面中做未登录情况的处理，比如展示一些默认背景图片，登录提示等等，又由于ionic的路由会缓存曾经访问过的页面，所以当你登录成功后，需要去刷新这些被缓存的页面。可以使用如下代码

javascript 代码 效果预览

   
   

    
    

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
    
    
    
    

   
   
   
   

    
    

     
     

      
      

     
     
     
     

      
      

     
     
     
     

      
      

       
       $scope
       
       .
       
       $on
       
       (
       
       "$ionicView.beforeEnter"
       
       ,
       
       function
       
       (
       
       )
       
       {
       
       //每次进入页面前判断是否登录
      
      
      
      

       
               
       
       //判断登录代码
      
      
      
      

       
           
       
       })
       
       ;
      
      
     
     
     
     

     
     

      
      

     
     
    
    
   
   
   
   

    
    

    
    

   
   

监听页面进入事件，每次页面进入都判断当前是否已登录，来判断是否加载数据。或者用$ionicHistory.clearCache() 直接清除所有缓存。

我的方法

最方便简单的方法，在.run 或者 .config 中监听state的变更事件，也就是在路由去加载每个页面之前就判断登录状态，来决定要不要加载该页面，还是跳转到登录页去。

javascript 代码 效果预览

   
   

    
    

     
     

      
      1
     
     
     
     

      
      2
     
     
     
     

      
      3
     
     
     
     

      
      4
     
     
     
     

      
      5
     
     
     
     

      
      6
     
     
     
     

      
      7
     
     
     
     

      
      8
     
     
    
    
    
    

   
   
   
   

    
    

     
     

      
      

     
     
     
     

      
      

      
      

     
     
     
     

      
      

       
       .
       
       run
       
       (
       
       function
       
       (
       
       $ionicPlatform
       
       , 
       
       $rootScope
       
       , 
       
       $ionicHistory
       
       ,
       
       $state
       
       ) 
       
       {
      
      
      
      

       
           
       
       var 
       
       needLoginView 
       
       = 
       
       [
       
       "myclass"
       
       ,
       
       "mycomment"
       
       ,
       
       "myfavorite"
       
       ,
       
       "myquestion"
       
       ,
       
       "orderlist"
       
       ]
       
       ;
       
       //需要登录的页面state
      
      
      
      

       
           
       
       $rootScope
       
       .
       
       $on
       
       (
       
       '$stateChangeStart'
       
       ,
       
       function
       
       (
       
       event
       
       , 
       
       toState
       
       , 
       
       toParams
       
       , 
       
       fromState
       
       , 
       
       fromParams
       
       , 
       
       options
       
       )
       
       { 
      
      
      
      

       
               
       
       if
       
       (
       
       needLoginView
       
       .
       
       indexOf
       
       (
       
       toState
       
       .
       
       name
       
       )
       
       >=
       
       0
       
       &&!
       
       $rootScope
       
       .
       
       isLogin
       
       )
       
       {
       
       //判断当前是否登录
      
      
      
      

       
           
       
               
       
       $state
       
       .
       
       go
       
       (
       
       "login"
       
       )
       
       ;
       
       //跳转到登录页
      
      
      
      

       
           
       
               
       
       event
       
       .
       
       preventDefault
       
       (
       
       )
       
       ; 
       
       //阻止默认事件，即原本页面的加载
      
      
      
      

       
               
       
       }
      
      
      
      

       
           
       
       })})
       
       ;
      
      
     
     
     
     

     
     

      
      

     
     
    
    
   
   
   
   

    
    

   
   
   
   

    
    

    
    

   
   

这样只需要把所有需要登录的页面state名写入needLoginView 数组中，每次切换页面，就会自动判断是否要跳转到登录页面，并且登录页返回直接到当前页，减少很多麻烦。