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

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

赞 (0)

相关推荐

  • AngularJS实现单一页面内设置跳转路由的方法

    本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法.分享给大家供大家参考,具体如下: 单一页面内设置跳转路由 鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)中,跳转过程中会出现短暂的白页. 因此,我们在开发过程中,将页面逻辑封装到同一个html中.当系统第一次加载页面时,将所有页面全部加载进去,然后通过angularJS内置的路由进行加载. 直接上代码

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • 详解Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由(router)机制是离不开的,并且好多地方都要用到. 首先路由配置Route: import { NgModule } from '@angular/core'; im

  • angular4 如何在全局设置路由跳转动画的方法

    最近用angular4写项目需要为每次路由跳转增加动画,看了一下官方文档,虽然可以实现,但是要每个组件都引入一次animations,比较麻烦,找网上也查阅了很多资料,但是都没找到适用的方法,最后自己写了一种方法如下: 首先在app.module中导入BrowserAnimationsModule import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports:

  • AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)

    本文实例讲述了AngularJS实现用户登录状态判断的方法.分享给大家供大家参考,具体如下: 使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面. angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了 代码中的 $rootScope.user是登录后把用户信息放到了全局rootScope上

  • Angular 利用路由跳转到指定页面的指定位置方法

    之前做过页面内的跳转,比较简单,最近项目需要实现跨页面跳转,并跳转到指定地点,试了很多方法,有用到传递参数然后让页面滚动相应的距离,但是一旦文章长短发生变化,滚动的距离也需要重新计算,比较麻烦,所以最后总结出这两种比较靠谱的方法,只需要在需要跳转的地方加上合适的id就行,原理和单页面内跳转相似. detail.component.html <p>You'll see which payment methods are available to you on the checkout page,

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

    使用angularjs的但页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面. angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了. 第一步:定义myapp var myapp=angular.module("MainController",["ui.router",'infinit

  • vuex实现登录状态的存储,未登录状态不允许浏览的方法

    基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter. 导航守卫 正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

  • React-RouterV6+AntdV4实现Menu菜单路由跳转的方法

    React-RouterV6+AntdV4实现Menu菜单路由跳转的方法

    目录 React-RouterV6 + AntdV4实现Menu菜单路由跳转,采用子路由嵌套的方式 两种实现方式: 一.编程式跳转 二.链接式跳转 三.实现效果 React-RouterV6 + AntdV4实现Menu菜单路由跳转,采用子路由嵌套的方式 两种实现方式: 方式一:编程式跳转 使用useNavigate() 方式二:NavLink链接式 <Link to="/home">主页</Link> 配置路由和主页 App.js import { Route

  • Flutter定义tabbar底部导航路由跳转的方法

    Flutter定义tabbar底部导航路由跳转的方法

    本文实例为大家分享了Flutter定义tabbar底部导航路由跳转的具体代码,供大家参考,具体内容如下 效果展示 整体实现的目录结构 第一步 把三个页面放到tabs里 Category.dart || Home.dart || Setting.dart 在这里我只展示 Home.dart 另外两个页面相同 import 'package:flutter/material.dart'; class HomePage extends StatefulWidget {   HomePage({Key

  • vue-router beforeEach跳转路由验证用户登录状态

    使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向. 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态.也可以结合sessionStorage 和localStorage使用,原理相同. 用户登录状态验证 路由配置 定义需要判断登录状态的

  • Django中间件拦截未登录url实例详解

    1.利用装饰器在视图中拦截未登录的url @login_required(login_url='/user/login/') def homepage(request): pass 这种方法适合于程序中只有少数几个需要登录拦截的url. 2. 利用中间件技术拦截未登录的url 2.1 在settings.py添加MIDDLEWARE设置:middleware.LoginCheckMiddleware MIDDLEWARE = [ 'django.middleware.security.Secur

  • 前后端如何实现登录token拦截校验详解

    前后端如何实现登录token拦截校验详解

    一.场景与环境 最近需要写一下前后端分离下的登录解决方案,目前大多数都采用请求头携带 Token 的形式 1.我是名小白web工作者,每天都为自己的将来担心不已.第一次记录日常开发中的过程,如有表达不当,还请一笑而过: 2.本实例开发环境前端采用 angular框架,后端采用 springboot框架: 3.实现的目的如下:   a.前端实现登录操作(无注册功能):   b.后端接收到登录信息,生成有效期限token(后端算法生成的一段秘钥),作为结果返回给前端:   c.前端在此后的每次请求,

  • Vue注册模块与登录状态的持久化实现方法详解

    Vue注册模块与登录状态的持久化实现方法详解

    目录 整体框架 1. 前端页面授权 2. 实现注册页面 3. 实现登录状态的持久化 优化前端 整体框架 1. 前端页面授权 当我们登录网站的时候,如果没有登录,强制让用户重定向到 登录界面 在 router 目录下的 index.js 文件下实现. router -> index.js import store from '../store/index' // 把一些额外信息放到一个额外的域里面,meta信息里面存一下是否要授权,如果需要授权而且没有登录,重定向到登录页面,重定向到登录界面. c

  • jQuery Ajax 实现在html页面实时显示用户登录状态

    当网站是全静态的html页面时,而又希望网站会员在登录之后并在所有页面头部显示登录状态,如用户名等,如果未登录就是未登录状态,下面给大家来分享实现的方法. 一.在html静态页面中加入div,并指定ID 如: <div id="ajaxlogin"></div> 二.新建一个动态的ajaxlogin.php文件,用来判断用户是否登录了 代码如下: <? session_start(); if( $_SESSION['u_login']=='turelogi

随机推荐