• vue三十七:Vue-Router之路由守卫之全局守卫和局部守卫


    对于某些接口的前置校验,比如未登录状态下访问个人中心,明显是不应该访问到的,应该跳转到登录页面才对

    官方说明:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

    一、全局路由守卫:就是在整个网页中,只要发生了路由的变化,都会触发。全局导航守卫主要包括两个函数,分别为:beforeEach、afterEach。

    1. `beforeEach(to,from,next)`:`to`代表的是上一个路由对象,`from`代表的是下一个路由对象。next代表的是控制下一步路由该怎么走。
      * next():按照正常的流程来走。
      * next("/"):之前的路由被断掉了,重新走到/中去。
      * next(false)或者是没有调用:不会导向任何路由。
    2. `afterEach(to,from)`:路由完成后的回调。

    以上方式会把所有的请求都拦截下来,现在只需要实现访问/center的时候进行身份校验即可

    在/center判断的分支下,判断是否已登录,已登录则放行,否则跳转到登录组件

    登录组件

    导入Login组件并注册路由

    模拟登录状态

    路由拦截

    二、局部路由守卫(组件内的守卫)

    路由加载之前触发:beforeRouteEnter (to, from, next)
    更新路由之前触发:beforeRouteUpdate (to, from, next)
    离开当前路由之前触发:beforeRouteLeave (to, from, next)

    使用局部守卫实现访问/center路由时判断段是否登录

    注释掉原来的全局守卫

    在center组件中创建局部守卫

    访问center

    讨论群:249728408
  • 相关阅读:
    网络编程-Python的socket库
    Python -用虚拟环境保存库文件
    Python --文件的读写
    VIM--常用操作
    libpcap -学习1
    Python -装饰器
    C++ 关于map,function的简单应用
    UVAlive 3635 (13.08.23)
    C语言中的整型提升(integral promotion)
    [置顶] 从一位数组中提取最小k个元素
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/12500765.html
Copyright © 2020-2023  润新知