import router from '@/router'
import store from '@/store'
import { Message } from 'element-ui'

// 重定向地址
const redirectPath = {
  401: '/login',
  403: '/403'
}

// 路由白名单
const whiteList = ['/login']

router.beforeEach(async (to, from, next) => {
  // 判断用户是否登录
  const hasToken = store.getters.token
  if (hasToken) {
    // 如果用户已登录，并且跳转到登录页，则重定向到首页
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      // 判断用户是否有权限访问该页面
      const hasPermission = store.getters.hasPermission
      if (hasPermission) {
        next()
      } else {
        // 如果没有权限，则跳转到 403 页面
        next({ path: '/403' })
      }
    }
  } else {
    // 如果用户未登录，则判断是否在白名单中，如果在白名单中，则直接进入，否则重定向到登录页
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})

router.afterEach((to) => {
  // 根据路由 meta 设置标题
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = '默认标题'
  }
})

// 错误处理
router.onError((error) => {
  const { response } = error
  if (response) {
    const status = response.status
    const message = response.data.message || '服务器错误'
    Message.error(message)
    // 根据错误码重定向到对应的页面
    if (redirectPath[status]) {
      router.replace(redirectPath[status])
    }
  } else {
    Message.error('网络错误')
  }
})

上述代码中，我们对路由前置守卫进行了封装，实现了以下功能：

1. 判断用户是否已登录，如果未登录则重定向到登录页。
2. 判断用户是否有权限访问该页面，如果没有则重定向到 403 页面。
3. 根据路由 meta 设置标题。
4. 错误处理：根据错误码重定向到对应的页面。

此外，代码中还包括了一个路由白名单，用于控制哪些页面可以在未登录的情况下直接访问。在具体的开发中，需要根据实际情况进行调整和优化。