【Vue】登录访问拦截 - 路由前置守卫

注意搜的是vue-router的官网

目标：基于全局前置守卫，进行页面访问拦截处理

说明：智慧商城项目，大部分页面，游客都可以直接访问, 如遇到需要登录才能进行的操作，提示并跳转到登录

但是：对于支付页，订单页等，必须是登录的用户才能访问的，游客不能进入该页面，需要做拦截处理

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

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

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

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

router.beforeEach((to, from, next) => {
  // 所有的路由在真正访问到之前（解析渲染对应组件页面前），都会先经过全局前置守卫
  // to和from是路由器对象，next是函数
  // 1. to   往哪里去， 到哪去的路由信息对象（路径，参数）
  // 2. from 从哪里来， 从哪来的路由信息对象（路径，参数）
  // 3. next() 是否放行
  //    如果next()调用，就是放行，放行到to要去的路径
  //    next(路径) 进行拦截，拦截到next里面配置的路径页面
})

path和fullPath区别

path：指的就是路径，不包含一些查询参数

fullPath：包含查询参数

store/index.js

export default new Vuex.Store({
  getters: {
    token (state) {
      return state.user.userInfo.token
    }
  },
  modules: {
    user,
    cart
  }
})

router/index.js

// 定义一个数组，专门用户存放所有需要权限访问的页面
const authUrls = ['/pay', '/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.state.user.userInfo.token
  const token = store.getters.token
  if (token) {
    next()
  } else {
    next('/login')
  }
})