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

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

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

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

图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://bjjierui.cn/article/cosppc.html