vue permission management

 

Use the meta of vue-router, where requireLogin indicates that the component needs to log in, and you can add different states according to actual needs

    {
      path: '/main-page',
      name: 'MainPage',
      component: MainPage,
      meta: {
        requireLogin: true
      }

 

Listen for route changes in beforeEach, and if the target component needs to log in, jump the page according to the situation

router.beforeEach((to, from, next) => {
    // console.log(to, from, next)
    console.log(
      to.meta
    )

    if (to.meta.requireLogin) {
      console.log('该组件需要登录权限');
      // 跳转到登录页面
      // next('/login')
      next({name: 'login'})
    }
    next()

  }
)