vue怎么用全局导航守卫作登录后跳转到未登录前指定页面-创新互联

这篇文章主要讲解了vue怎么用全局导航守卫作登录后跳转到未登录前指定页面,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

创新互联建站-专业网站定制、快速模板网站建设、高性价比海盐网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式海盐网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖海盐地区。费用合理售后完善,十载实体公司更值得信赖。

有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth3-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到login页面。但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面。大致流程图如图1所示:

vue怎么用全局导航守卫作登录后跳转到未登录前指定页面

图1 登录后跳转到未登录前指定页面流程图

  在vue-route的官方文档里其实有给到过这个demo,官方文档链接在此:https://router.vuejs.org/zh/guide/advanced/meta.html。但是不是很符合我们的需求,于是稍加改动,先上代码,搭配流程图可能更容易理解:

router.beforeEach((to, from, next) => {
 var asideMenuConfig = sessionStorage.getItem("asideMenuConfig");
 // 验证当前路由所有的匹配中是否需要有登录验证的
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // 这里可以将cookie里是否存有token作为验证是否登录的条件
  // 请根据自身业务需要修改
  // 本段代码根据是否有权限菜单作为是否登录依据
  if (asideMenuConfig) {
   //校验所跳路由是否在配置菜单中
   if (asideMenuConfig.indexOf(to.path) != -1 || to.path == "/index" || to.path == "/login") {
    if(sessionStorage.getItem('redirect')!=null){
     var redirect=sessionStorage.getItem('redirect');
     if(to.path == redirect){//解决next()无限循环
      next()
     }else{
      next({
       path: redirect
      });
     }
    }else{
     next();
    }
   } else {
    next({
     path: from.path
    })
   }
  } else {
   sessionStorage.setItem('redirect', to.fullPath);
   next({
    name: 'login'
   })
  }
 } else {
  next();
 }
})

文章题目:vue怎么用全局导航守卫作登录后跳转到未登录前指定页面-创新互联
标题路径:http://pwwzsj.com/article/cosppc.html