vue使用路由元信息实现指定页面的权限访问

实际开发中肯定会有需要用户登录才能查看固定页面的需求。在vue中可以通过vue的全局守卫与路由的元信息实现访问权限的控制

1.添加元信息

在某个需要登录才能查看的页面路由添加自定义元信息：

  routes: [
   {
      path: '/create',
      name: 'create',
      component: CreatePost,
      meta: {
        requiredLogin: true
      }
    }
  ]

说明：

• requiredLogin是开发者自定义的，用来实现判断当前页面是否需要登录才能查看的功能

2.配置全局导航守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requiredLogin) {
    next('/login')
  } else {
    next()
  }
})

这里通过判断要去往的路由元信息（to.meta）来控制是否重定向到登录页面