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

时间:2021-05-28

使用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");});

第三步:使用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 未登录状态拦截路由跳转的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章