当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > angular 未登录状态拦截路由跳转的方法

angular 未登录状态拦截路由跳转的方法

2018年11月08日  | 移动技术网IT编程  | 我要评论

使用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_',
   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'});//跳转到登录界面
  }
 });
});

以上这篇angular 未登录状态拦截路由跳转的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网