导航守卫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)


相关推荐

  • 谈谈几个 Spring Cloud 常见面试题及答案

    来自:Wbw Belief 链接:blog.csdn.net/qq_41497111/article/details/92067565 全文目录 什么是微服务? 微服务之间如何独立…

  • spring cloud之 hello world和eurake介绍及eurake使用

    spring cloud之 hello world和eurake介绍及eurake使用一.springcloud之helloworld1.两个微服务,分别是用户和订单,其中用户是微服务提供者,订单是微服务消费者2.首先建一个工程,里面有两个module:prvoider-user和comsumer-ordercomsumer-user配置文件:prvoider-order配置文件:用spring提供的RestTemplate访问rest…

  • Oracle修改表名报错ORA-14047

    Oracle修改表名报错ORA-140471、使用sys或其他用户修改表名SQL>showuser;USERis”SYS”SQL>altertableuser1.tb1renametouser1.tb2;ERRORatline1:ORA-14047:ALTERTABLE|INDEXRENAMEmaynotbecombinedwithotheroperations#使用非属主用户修改表名时修改后的表名不需要加属主正确修改方式:SQL>altertableuser

  • 图书管理系统C语言_c语言图书信息管理系统

    图书管理系统C语言_c语言图书信息管理系统【主要内容】开发一个图书信息管理系统,图书信息包括:图书编号、书名、作者、出版社、类别、出版时间、价格等基本信息(也可以根据自己情况进行扩充,比如是否借出、库存量等)。使之能提供以下基本功能:(1)图书信息录入功能(图书信息用文件保存)--输入(2)图书信息浏览功能--输出(3)查询功能(至少一种查询方式)、排序功能(至少一种排序方式):①按书名查询②按作者名查询按照价钱排序按出版时间排序等等(4)图书信息的删除与修改扩展功能:可以按照自己的程度进行扩展。比如(1)简…

    2022年10月11日
  • 解决:navicat for mysql连接失败[通俗易懂]

    解决:navicat for mysql连接失败[通俗易懂]1、问题描述:在navicatformysql连接mysql8.0.23时,出现如下错误。2、原因:通过百度翻译,发现是由于navicat版本的问题,出现连接失败的原因。这也就是说需要升级navicat版本。通过搜索,发现navicat是收费的,升级将会面临其他不可控的问题。于是需要寻找其他方法。通过查阅资料以及他人的经历分享。我得知了:mysql8之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password

    2022年10月14日
  • python开发oa办公系统_python web开发框架

    python开发oa办公系统_python web开发框架https://www.odoo.com/zh_CN

    2022年10月28日

发表回复

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

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