vue-router 路由权限控制

vue项目开发中经常需要对路由进行权限控制,比如只有登录才能访问某个路由
这里分享一个简单是路由登录权限设置 废话不多说,直接上代码

const router = new Router({
  routes: [
      { 
         path: 'recharge', 
         name: 'recharge', 
         meta: { // 在路由配置中加入meta:{requireAuth: true}
             requireAuth: true
          }, 
         component:recharge
      }
  ]
})

// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (store.state.login) { // 通过vuex state获取当前登录状态
      next()
    } else {
      next(
        // 将跳转的路由path作为参数,登录成功后跳转到该路由
        {path: '/login',query: {}}
      )
    }
  } else { //如果不需要正常跳转
    next()
  }
})

你可能感兴趣的:(vue-router 路由权限控制)