Vue中页面访问拦截

页面访问拦截

目标：基于全局前置守卫，进行页面访问拦截处理
说明：对于一个项目来说，大部分的页面，游客都可以直接访问，如遇到需要登录才能进行的操作，提示并跳转到登录，但是：对于支付页，订单页等，必须是登录的用户才能访问，游客不能进入该页面，需要做拦截处理

路由导航守卫-全局前置守卫

• 所有的路由一旦被匹配到，都会先经过全局前置守卫
• 只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容

访问权限页面时，拦截或放行的关键点：用户是否有登录权证token

官网vue3：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
官网vue2：https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html

语法：

router.beforeEach((to,from,next)=>{
   // 1.to   往哪里去， 到哪去的路由信息对象
   // 2.from 从哪里来，从哪里来的路由信息对象
   // 3.next（） 是否放行
   //   3.1 如果next()调用，就是放行
   //   3.2 next(路径) 拦截到某个路径页面
})

步骤：

• 跳转路由
• 全局前置守卫
• 是否访问权限页面
  • 非权限页面 直接放行
  • 是权限页面 判断是否有token，有就放行 ，没有就拦截到登录

代码：

// 定义一个数组，专门用户存放所有权限访问的页面
const authUrls = ['/pay', '/myorder']
// 全局前置导航守卫
// 所有的路由在真正访问到之前，都会先经过全局前置守卫
// 只有全局前置守卫放行了，才会到达对应的页面
router.beforeEach((to, from, next) => {
  // 1.to   往哪里去， 到哪去的路由信息对象
  // 2.from 从哪里来，从哪里来的路由信息对象
  // 3.next（） 是否放行
  //   3.1 如果next()调用，就是放行
  //   3.2 next(路径) 拦截到某个路径页面

  // 看 to.path 是否在authUrls 中出现过
  if (!authUrls.includes(to.path)) {
    // 非权限页面，直接放行
    next()
  }
  // 这里是权限页面，需要判断token
  // 从vuex中获取 用户的token信息
  const token = store.getters.token
  if (token === null || token === '') {
    next('/login')
  }
  next()
})