路由拦截 beforeEach 钩子函数

在 axios 库中，我们一般使用 interceptors 对接口请求或者接口响应进行拦截，代码如下：

const $http = axios.create({
  headers: defaultConfig.headers
})
// request拦截器
$http.interceptors.request.use(config => {
  ......  
  return config
}, error => {
  // Do something with request error
  Promise.reject(error)
})

而我们如何进行路由拦截呢？当然是使用 vue-router 全局钩子函数。

在 使用 vue-router 全局守卫钩子函数，根据登录状态进行路由拦截以及滚动条回到页面顶部 文件中，我们使用 beforeEach 钩子函数进行登录状态的路由拦截；

除了对登录状态进行拦截还可以对用户是否认证进行拦截；当用户认证过后才能访问该路由；实现代码如下：

// 需要登录的路由
const loginPages = [
  '/certification',
  '/order',
  '/order-detail',
]
// 需要认证
const authPages = [
  '/order',
  '/order-detail',
]
router.beforeEach((to, from, next) => {
  const mtToken = Cookies.get('AppAuthorization')
  const wlToken = Cookies.get('WlAuthorization')
  if (to.query.source === 'mt' && mtToken && !wlToken) { // 其他网站过来 - 自己未登陆
    store.commit('setToken', mtToken)
    store.dispatch('BaseInfo')
  } else { // 自己网站登陆
    // 判断需要登录的路由 防止通过直接改变url进入相应页面
    if ((loginPages.includes(to.path) || to.path.includes('personalCenter')) && !store.state.user.userInfo.userId) {
      store.commit('setLoginVisible', true) // 打开登录
      next({ path: from.path || '/' }) // 将路由重置为from.path
      return
    }
  }
  // 判断需要认证的路由
  if (authPages.includes(to.path) && !utils.checkAuth(store.state.user.userInfo.authStatus)) {
    next({ path: from.path || '/' }) // 将路由重置为from.path
    return
  }
  next()
})