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


Posted in Javascript onOctober 09, 2018

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

以上这篇angular 未登录状态拦截路由跳转的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
原生js编写焦点图效果
Dec 08 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 #Javascript
angularJS1 url中携带参数的获取方法
Oct 09 #Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 #Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 #Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 #Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 #Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 #Javascript
You might like
坏狼的PHP学习教程之第2天
2008/06/15 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jquery延迟对象解析
2016/10/26 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python实现共轭梯度法
2019/07/03 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
基于Pytorch SSD模型分析
2020/02/18 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
文言文形式的学生求职信
2013/12/03 职场文书
2015年小学开学寄语
2015/02/27 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
详解MySQL中的主键与事务
2021/05/27 MySQL
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS