router.beforeEach路由守卫封装

下面是一个示例的 `router.beforeEach` 路由守卫的封装方式：

// router.js

import router from '@/router'
import store from '@/store'

router.beforeEach((to, from, next) => {
  // 判断用户是否已登录
  const isLoggedIn = store.getters['auth/isLoggedIn']

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要登录的页面
    if (!isLoggedIn) {
      // 用户未登录，跳转到登录页
      next('/login')
    } else {
      // 用户已登录，继续访问
      next()
    }
  } else {
    // 不需要登录的页面，直接访问
    next()
  }
})

上述代码中，我们在 `router.js` 文件中定义了 `router.beforeEach` 路由守卫。守卫函数接收三个参数：`to`、`from` 和 `next`。在这个示例中，我们使用了 Vuex 存储来判断用户是否已登录。

根据路由配置中的 `meta.requiresAuth` 属性，我们可以确定哪些页面需要用户登录才能访问。如果用户未登录且访问了需要登录的页面，我们会通过 `next('/login')` 将用户重定向到登录页；否则，如果用户已登录或访问的是不需要登录的页面，我们会调用 `next()` 继续访问。

请注意，在使用这个示例之前，你需要确保你的项目中已经配置好了 Vue Router 和 Vuex，并且在路由配置中正确设置了 `meta.requiresAuth` 属性。

这只是一个简单的示例，你可以根据你的实际需求拓展和修改它。你可以在守卫函数中添加其他逻辑、验证用户权限等。详细的路由守卫使用方法可以参考 Vue Router 的官方文档。