vue-router页面鉴权

Question

问题一：
我想实现的效果是，登陆之后可以跳转到个人中心页面
比如我现在的个人中心页面url是这样的

http://localhost:8089/user

在未登录状态下，是没有按钮可以点击跳转到这个路由下的，但是直接在浏览器输入可以到达这个路由下
我现在在main.js下做的处理

router.beforeEach((to, from, next) => {
  // 判断要去的路由界面是不是要鉴权
  if (to.meta.checkLogined) {
// 查看是否登陆
if (!store.state.userInfo) {
  // 没登录的做处理
  next({
    path: '/home'
  })
} else {
  // 登陆的正常跳
  next()
    }
  } else {
    // 不需要鉴权的正常跳
    next()
  }
})

路由router.js

   {
  path: '/user',
  name: 'user',
  meta: {checkLogined: true},
  component: user,
  children: [
    {
      path: '/user/openShow',
      name: 'openShow',
      component: openShow,
      children:[
        {
          path: '/user/openShow/step1',
          name: 'step1',
          meta: {checkLogined: true},
          component: step1
        }
       ]
     }]
   }

我更改的鉴定状态发现正常点击的情况下是可以处理的，但是在浏览器直接输入地址还是无法处理。
另外，我在父路由做了鉴权，其子路由依然需要单独的增加meta属性吗?也就是说，父路由可以被拦截处理，但是加上子路由就不行？
问题二： 我在子路由依然有一些权限需要来管理能否跳转，这样的话又该怎么做？需要单独写beforeEach来处理，还是统一写在mainjs里？

Answer 1

Answer 2

可以在总页面，例如默认的App.vue页面的beforeCreated钩子中获取到配置的路由参数来判断是否已经有进入权限，没有就跳转到指定的页面去。这样就可以控制直接在地址栏输入路由来跳转的情况。

希望我的回答能帮助到你，有不明白的地方欢迎评论留言！

Answer 3

router.beforeEach() 要在创建 Vue 实例之前，即在 new Vue() 之前。