路由守卫

路由守卫

CanActivate | 处理导航到某路由的情况—阻止或允许用户进入组件

CanDeactivate | 处理从当前路由离开的情况—用户离开时

Resolve | 在路由激活之前获取路由数据—在组件绑定的属性还没有被赋值时会报错，这个守卫就是解决这个问题的

CanActivate

1.需要新建一个 XX.guard.ts 文件

2.在这个.ts 文件里导入 CanActivate 模块 ...

长这样：

canActivate(){} 这个方法 return true 用户就能正常加载这个路由组件，返回false 就被拦住了

3.在app.module.ts里导入这个模块

在providers：[] 注入模块

4.在app-routing.module.ts 导入这个模块

在你需要使用路由守卫的地方这样写：

CanDeactivate

1.需要新建一个 XX.guard.ts 文件

导入CanDeactivate 模块和要保护的模块

这个文件是这样写的：

箭头所指的就是需要保护的模块，canDeactivate 这个函数返回true表示同意离开，返回false表示不同意离开

2.在app.module.ts中导入刚刚创建的这个模块

注入到providers

3.在app-routing.module.ts 里导入创建的这个模块

在要保护的模块的路由的地方这样配置：

Resolve

原文地址：https://www.cnblogs.com/chefweb/p/8400690.html

时间： 2024-10-08 22:19:14

路由守卫的相关文章

angular4.0 路由守卫详解

在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单. Angular 的 Route 路由参数中除了熟悉的 path.component 外,还包括四种是否允许路由激活与离开的属性. canActivate: 控制是否允许进入路由. canActivateChild: 等同 canActi

Angular4 路由守卫

序言在不设置路由守卫的时候,任何用户能在任何时候导航到任何地方的,但是在某些场景为了安全,我们需要登录的用户才能导航到对应的页面.这时候我们需要给组件添加路由守卫. 步骤 1.分层路由介绍 CanActivate:处理导航到某路由的情况 CanActivateChild:处理导航到某子路由的情况 CanDeactivate:处理从当前路由离开的情况 Resolve:在路由激活之前获得路由数据 CanLoad:处理异步导航到某特性模块的情况 2.声明这里的路由守卫使用与Angular-cli使

Angular4.x通过路由守卫进行路由重定向，实现根据条件跳转到相应的页面

需求: 最近在做一个网上商城的项目,技术用的是Angular4.x.有一个很常见的需求是:用户在点击"我的"按钮时读取cookie,如果有数据,则跳转到个人信息页面,否则跳转到注册或登录页面解决在这里通过Angular的路由守卫来实现该功能. 1. 配置路由信息 const routes = [ { path: 'home', component: HomeComponent }, { path: 'product', component: ProductComponent },

vue的生命周期和路由守卫

组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有两个特殊的(使用keep-alive):activated.deactivated(不详述) v2.5.0+新增: errorCaptured (暂时还不知道咋用) 路由守卫: 全局&路由独享:beforeEach.beforeResolve(v2.5.0+新增).afterEach :beforeEn

nuxtjs中使用路由守卫

在vue中的路由守卫一般是来验证token失效什么的,当然也可以设置权限啦,在nuxtjs中如何使用路由守卫呢,话不多说,直接上代码在plugins目录下简历route.js export default ({ app }) => { app.router.afterEach((to, from) => { console.log(to.path) }) } 然后在 nuxt.config.js中添加配置plugins即可 plugins: [ '@/plugins/element-ui',

Vue路由及路由守卫

1. Vue路由的添加 vue cli3添加vue-router通过命令vue add router export default new Router({ mode: 'history', routes: [ { path: '/', component: Main }, { path: '/login', component: Login } ] }) // app.vue <div id="app"> <router-view></router-

Vue router 全局路由守卫

记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from 'vue-router' import store from './../store' import Home from 'components/home/home' // 主页组件 // 其它组件... import Cart from 'components/cart/cart' // 购物车组

Vue配置路由和传参方式及路由守卫！

安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let routes = [ {...}, {...} ] 上列匹配规则中对象有如下属性 path : 路由路径 component : 所加载的组件 name : 别名 redirect : 重定向 children : 子级路由创建路由实例 let router = new VueRouter({

Vue-router 路由守卫

Vue-router 路由守卫 const router = new VueRouter({ ... }) 前置路由守卫 router.beforeEach((to,from,next) => { // to 下一跳路由路径地址 // from 上次路由地址对象 // next 回调钩子函数,next会解析出当前路径是否合法,是否需要路径判断重定向报错等可以给next传参 // 执行的效果依赖传递的next 参数,如果全部钩子执行完毕,路由状态转为confirmed // next 可接受