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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
Javascript 布尔型分析
Dec 22 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
Vue 中使用 typescript的方法详解
Feb 17 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Jquery实现的角色左右选择特效
2014/05/21 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
集体备课反思
2014/02/12 职场文书
协议书的格式
2014/04/23 职场文书
服务承诺书格式
2014/05/21 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
返乡农民工证明
2015/06/24 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
vue中data里面的数据相互使用方式
2022/06/05 Vue.js