导航守卫beforeEach的运用

导航守卫beforeEach的运用beforeEach用于在路由跳转前要执行的方法。我在项目中用于全局main.js中,判断是否登录,如果登录就继续跳转,没有登录就去跳转页面constrouter=newVueRouter({…})router.beforeEach((to,from,next)=>{if(to.matched.some(record=>record.meta.req…

大家好,又见面了,我是你们的朋友全栈君。

前端常常需要实现的一个功能,比如一个商城,跳转到某些页面,如个人中心等就需要登录过才能进去,不然就先跳转到登录页面之后才能跳转到需要登录之后才能查看的页面,此功能就需要导航守卫来完成比较好。
我在项目中用于全局main.js中,判断是否登录,如果登录就继续跳转,没有登录就去跳转页面

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) {
// 路由元信息requireAuth:true则不做登录校验
 next();
} else {

get(BASE_URL + "login/index").then(res => { //此处接口是问后台是否登录过,这个可以前端自己通过sessionStorage实现或者通过vuex+sessionStorage实现,用一个变量保存是否登录过,或者有没有token判断等方式
   if (res.data.code === 200) {
       //成功
    next();
  } else {
     if (to.path == "/login" || to.path == "/") {
         //如果是登录页面路径,就直接next()
      next();
       } else {
        //不然就跳转到登录;
      next({
        path: "/login"
           //	          query: { redirect: to.fullPath } //这里是实现路径重定义,方便完成登录动作直接跳转到本页面
         });
       }
    }
  }).catch(err => {
    console.log(err, "err");
      next("/notFindPage");
 });
}
});

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数:
to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的),继续跳转。

next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
可以通过路由远信息requireAuth:true指定某一个页面不验证

routes: [
    {
      path: '/', //这个表示的是根目录,即一进入的页面
      redirect: 'login', //设置页面一进来就显示的页面,即重定向到登录页
      meta:{
        requireAuth:true
      }
    },
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148321.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java标识符是什么_Java 标识符「建议收藏」

    java标识符是什么_Java 标识符「建议收藏」什么是标识符标识符就是程序员在编写Java程序时,自定义的一些名字。例如第一个Java程序里关键字class后跟的HelloWorld,就是我们自定义的类名。类名就属于标识符的一种。标识符除了应用在类名上,还可以用在接口、变量、方法名、包名上。(要求同学们先记住,以后会详细见到这些)。标识符命名规则标识符由字母、下划线、美元符或数字组成标识符不能以数字开头,不能是关键字标识符严格区分大…

  • 舆情监控系统python开源_舆情监测系统开源

    舆情监控系统python开源_舆情监测系统开源互联网已成为思想文化信息的集散地和社会舆论的放大器。截至2009年6月30日,我国网民数量达到3.38亿人,网民规模已稳居世界第一位,互联网的影响力也日益提升,网络舆论已成为不可小觑的强大社会力量。近年来,网络热点事件频发,其大背景主要有两方面:一是我国社会处于转型期,涌现出一些新矛盾和新问题,如贫富悬殊、官员腐败、传统价值观受冲击等;二是随着互联网技术的迅速发展,越来越多的人上网获取新闻信息,发…

  • Osip2和eXosip协议栈的简析[通俗易懂]

    Osip2和eXosip协议栈的简析[通俗易懂]Osip2和eXosip协议栈的简析

  • jmeter如何确保输入的参数为唯一字段

    jmeter如何确保输入的参数为唯一字段

  • linux配置selinux为许可模式,SELinux工作模式设置(getenforce、setenforce和sestatus命令)…

    linux配置selinux为许可模式,SELinux工作模式设置(getenforce、setenforce和sestatus命令)…除了通过配置文件可以对SELinux进行工作模式的修改之外,还可以使用命令查看和修改SELinux工作模式。首先,查看系统当前SELinux的工作模式,可以使用getenforce命令;而如果想要查看配置文件中的当前模式和模式设置,可以使用sestatus命令,下面的代码显示了这两个命令:[root@localhost~]#getenforce#查询SELinux的运行模式…

  • c语言fread6,c语言中fread的用法「建议收藏」

    c语言fread6,c语言中fread的用法「建议收藏」fread是以记录为单位的i/o函数,fread和fwrite函数一般用于二进制文件的输入输出。下面小编就跟你们详细介绍下c语言中fread的用法,希望对你们有用。c语言中fread的用法如下:#includesize_tfwrite(constvoid*ptr,size_tsize,size_tnmemb,file*stream);返回值:读或写的记录数,成功时返回的记录数等…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号