vue系列文章（24）vue路由的路由独享守卫和组件内守卫-管理台权限控制案例

上节中对登录和注册的权限进行控制，采用的是全局路由守卫。

但部分路由中遇到的是点击管理台的权限判断，如果有权限则进行跳转，如果没有则没法跳转，就用到了路由的独享守卫和组件内守卫的方法。

路由独享守卫，可以在main.js的路由配置中加入

你可以在路由配置上直接定义 beforeEnter 守卫：

 

const routes = [
  {path: '/',name: 'homeLink',component:Home},
  {path: '/admin',name: 'adminLink',component:Admin,beforeEnter: (to,from,next) =>{
      // alert("非登录状态不能访问此页面");
      // next(false);
      if(to.path == '/login' || to.path == '/register') {
        next();
      }else{
        alert("还没有登录，请先登录")
        next('/login')
      }
    }},
  {path: '/menu',component:Menu},
  {path: '/login',component:Login},
  {path: '/register',component:Register},
  {path: '/about', redirect: '/about/contact', component: About,children: [
      {path: '/about/contact', name: 'contactLink',component: Contact},
      {path: '/about/delivery', name: 'deliveryLink', component: Delivery},
      {path: '/about/history', name: 'historyLink', component: History},
      {path: '/about/orderingGuide', name: 'orderingGuideLink', component: OrderingGuide}
    ]},
  {path: '*', redirect: '/'}  // * 代表所有，如果没有路由，则跳转到根目录
]

 

如上面代码中在admin点击后，通过beforeEnter进行路由的独享守卫控制，判断登录状态，如果登录有采用next()函数进行跳转，如果未登录则可以使用next(false)进行不跳转。

也可以采用next('/login’）让用户跳转到登录页面。

 

 

最后，你可以在路由组件内直接定义以下路由导航守卫：

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

beforeRouteEnter: (to,from,next) => {
  alert("hello:" + this.name);
  next();
}

上述代码是我们在admin组件中加入的这个方法。

beforeRouteLeave: (to,from,next) => {
  if(confirm('确认离开吗?') == true) {
    next()
  }else{
    next(false)
  }
}

以及在离开组件的时候触发的beforeRouteLeave方法，让用户进行的确认操作。

都是组件内守卫。

如果上面文章对你有用，打赏下我吧@*@