vue、全局前置守卫

需求：在使用商城app的时候，游客（没有登录的用户）可以看到商品信息，当游客点击添加购物车的时候，我们需要把游客"拦"到登录页面，登陆后，才可以添加商品。

游客只可以看得到部分页面。vue提供了全局前置守卫，我们可以轻松解决这个问题。

页面访问拦截目标：

基于全局前置守卫,进行页面访问拦截处理。

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

1.所有的路由一旦被匹配到,都会先经过全局前置守卫。

2.只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面。

在router目录下的index.js:

javascript 复制代码

// 所有的路由在真正被访问到之前(解析渲染对应组件页面前)，都会先经过全局前置守卫
// 只有全局前置守卫放行了，才会到达对应的页面

// 全局前置导航守卫
// to:   到哪里去，到哪去的完整路由信息对象 (路径，参数)
// from: 从哪里来，从哪来的完整路由信息对象 (路径，参数)
// next(): 是否放行
// (1) next()     直接放行，放行到to要去的路径
// (2) next(路径)  进行拦截，拦截到next里面配置的路径

// 定义一个数组，专门用户存放所有需要权限访问的页面
const authUrls = ['/payment', '/myOrder']

router.beforeEach((to, from, next) => {
  // console.log(to, from, next)
  // 看 to.path 是否在 authUrls 中出现过
  if (!authUrls.includes(to.path)) {
    // 非权限页面，直接放行
    next()
    return
  }

  // 是权限页面，需要判断token
  const token = store.getters.token
  if (token) {
    next()
  } else {
    next('/login')
  }
})

测试。