vue-router 鉴权 守卫

Posted 2021-07-08 fengshaopu

一、模块
1.路由守卫分为:

1.全局路由守卫
2.组件内部守卫
3.路由独享守卫

全局路由守卫

所有模板都可以守卫到
to是去那个页面
from是从那个页面来
next是否进入这个页面/下一步

router.beforeEach((to,from,next)=>{
  console.log(to);
  console.log(from);
  console.log(next());
  next()
})

//全局鉴权

router.beforeEach((to, from, next) => {
   if(to.path=="/wdd"){  //进入wdd页面的时候
     if(store.state.username==""){  //如果username 没有的话就 让他返回登录页面
        router.push("dl")
    }
   }
   if(to.path=="/dl"){      // 点击进入 登录页面的时候 
     if(store.state.username){ //有数据的时候让返回上一页
       router.go(-1) 
    }
   }
   next() //全局通过
 })

组件内部守卫

  beforeRouteEnter (to, from, next) {
  注意进入路由之前，组件渲染实例还没完成，还不可以使用this访问组件 ，
  可以使用vm
    console.log(to);
    console.log(from);
    console.log(next);
    console.log(next(vm));
    console.log(this);//undefind
    next(vm => {})
  }


  beforeRouteUpdate (to, from, next) {

   // 同一页面，刷新不同数据时调用，

    }

  beforeRouteLeave (to, from, next) {

    // 离开当前路由页面时调用

    }

路由独享守卫
一样的，
to是去哪里，from是从哪里来，next是是否进入，或者是进入下一步

   {
      path: '/xqq/:id',
      name: 'xqq',
      component: () => import('./views/lo/xqq.vue'),
      beforeEnter(to,from,next){next()}
    },