美文网首页
路由守卫

路由守卫

作者: 愤怒的阿昆达 | 来源:发表于2019-10-30 09:44 被阅读0次

参考原文:https://segmentfault.com/a/1190000020144286

守卫,顾名思义,必须满足一定的条件得到许可方可通行,否则拒绝访问或者重定向。Angular中路由守卫可以借此处理一些权限问题,通常应用中存储了用户登录和用户权限信息,遇到路由导航时会进行验证是否可以跳转。

守卫类型:

按照触发顺序依次为:canload(加载)、canActivate(进入)、canActivateChild(进入子路由)和canDeactivate(离开)。

使用场景分析
1.canLoad
默认值为true,表明路由是否可以被加载,一般不会认为控制这个守卫逻辑,99.99%情况下,默认所有app模块下路由均允许canLoad

2.canActivate
是否允许进入该路由,此场景多为权限限制的情况下,比如客户未登录的情况下查询某些资料页面,在此方法中去判断客户是否登陆,如未登录则强制导航到登陆页或者提示无权限,即将返回等信息提示。

3.canActivateChild
是否可以导航子路由,同一个路由不会同时设置canActivate为true,canActivateChild为false的情况,此外,这个使用场景很苛刻,尤其是懒加载路由模式下,暂时未使用到设置为false的场景。

4.CanDeactivate
路由离开的时候进行触发的守卫,使用场景比较经典,通常是某些页面比如表单页面填写的内容需要保存,客户突然跳转其它页面或者浏览器点击后退等改变地址的操作,可以在守卫中增加弹窗提示用户正在试图离开当前页面,数据还未保存 等提示。

相关文章

  • vue的路由守卫

    路由守卫分3种:全局守卫路由独享守卫组件内的路由守卫 1.全局守卫:beforeEachbeforeResolve...

  • 路由守卫

    路由守卫分为三种 全局守卫: 路由独享守卫卸载route里 组件内守卫:写在组件配置对象里

  • [VUE]动态的更新页面的Title

    首先可以用路由守卫 + VueRouter来实现路由守卫相关文档1.main.js里加入路由守卫 // 页面修改时...

  • vue学习笔记(八)导航守卫(全局守卫,路由独享,组件内守卫)

    导航守卫-全局守卫 导航守卫-路由独享 导航守卫-组件内守卫

  • vue-路由导航守卫&异步组件

    导航守卫包括全局导航守卫、路由守卫、组件局部守卫 全局导航守卫 在全局导航守卫中,每次路由的跳转他们三个都会被触发...

  • Vue嵌套路由和路由守卫

    嵌套路由 路由守卫

  • vue路由守卫

    概念 路由守卫,官网也叫导航守卫,所谓导航,就是路由正在发生变化 路由守卫,主要就是用来通过跳转或取消的方式守卫导...

  • vue学习(52)vue-router(4)

    路由守卫作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫(我们可以在meta中配置一些信息) ...

  • 路由

    全局守卫就是每一个路径进来都会经过这个全局守卫的处理 单路由守卫就是把守卫指定给某一个路由 组件内路由就是把守卫放...

  • vue-router 常见导航守卫

    全局守卫vue-router全局有三个守卫 路由独享守卫如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫 ...

网友评论

      本文标题:路由守卫

      本文链接:https://www.haomeiwen.com/subject/sugvvctx.html