Vue项目中使用 路由导航守卫 处理页面的访问权限

参考Vue-Router官方文档
Vue项目中使用 路由导航守卫 处理页面的访问权限
Vue项目中使用 路由导航守卫 处理页面的访问权限
Vue-Router导航守卫
Vue项目中使用 路由导航守卫 处理页面的访问权限

效果展示

Vue项目中使用 路由导航守卫 处理页面的访问权限

Vue项目中使用 路由导航守卫 处理页面的访问权限

Vue项目中使用 路由导航守卫 处理页面的访问权限

1、给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性
Vue项目中使用 路由导航守卫 处理页面的访问权限

{ // 小智同学
  name: 'user-chat',
  path: '/user/chat',
  component: () => import('@/views/user-chat'),
  meta: { requiresAuth: true }
},

2、通过路由拦截器统一校验
Vue项目中使用 路由导航守卫 处理页面的访问权限

router.beforeEach((to, from, next) => {
  if (to.name === 'login' || !to.meta.requiresAuth) {
    return next()
  }

  if (store.state.user) {
    return next()
  }

  Dialog.confirm({
    title: '该功能需要登录,确认登录吗?'
  }).then(() => {
    next({
      name: 'login',
      query: {
        redirect: from.fullPath
      }
    })
  }).catch(() => {
    // on cancel
  })
})
上一篇:One Chat for Mac多功能聊天软件常见问题解答


下一篇:Python忽略错误